Reactホームページの読み込みが遅い問題のパフォーマンス最適化事例の詳細な説明

Reactホームページの読み込みが遅い問題のパフォーマンス最適化事例の詳細な説明

しばらくReactを勉強した後、実践してみたいと思います。そこで、個人のブログのウェブサイトを再構築しました。サイトの再構築には約1週間かかりましたが、いざオンラインになってみると、アクセス速度が本当に遅く、我慢できないほどでした。記事数件しかない小さなサイトなのに、とても遅いので我慢できませんでした。私は完璧主義者ではありませんが、これではだめです。その後、パフォーマンスの研究に時間を費やしました。遅さには理由があることがわかりました。

React のようなフレームワークですか?

現在主流のフロントエンド フレームワークである React、Vue、Angular はすべてクライアント側レンダリングを使用します (サーバー側レンダリングはこの記事の範囲外です)。もちろん、これによりサーバーにかかる負荷が大幅に軽減されます。ブラウザに対する相対的な圧力が増大しました。つまり、多数の js ファイルをローカルで実行する必要があります。そして、これらの大きな js ファイルをサーバーからダウンロードするには時間がかかります。これらの js を再度実行するには時間がかかります。これがホームページの読み込みが遅くなる根本的な理由です。もちろんホームページだけですが、後続のキャッシュがあるので比較的高速です。では、速度を上げるにはどうすればいいのでしょうか?始めるには2つの方法があります

  • 静的リソースのダウンロード速度を向上
  • 実行速度を向上させるためにコードを最適化します

具体的な最適化の前に、私のブログ サイトのサーバー構成についてお話しします。

  • Alibaba Cloud サーバー ECS
  • システム: Ubuntu 16.04
  • CPU: 1コア
  • メモリ: 1GB
  • MYSQLデータベース
  • Nginx バージョン 1.16.1

テスト環境はFirefoxブラウザを使用しており、最適化前のアクセス速度は以下のとおりです

とても遅いと思いませんか?あまりにも遅いので、自分の人生に疑問を抱くほどです。 2,000 ワード以上のブログ記事を読み込むのに 6 秒かかります。自分のブログを参考に、段階的に最適化していきましょう。

静的リソースのダウンロード速度を向上

静的リソースのダウンロード速度を上げる方法は多数あります。 HTTP1.1 から HTTP2.0 にアップグレードしたり、gzip データ圧縮を有効にしたり、CDN を使用したりすることが、速度を向上させる最も効果的な方法です。私のウェブサイトも主にこれらの側面から一つ一つ最適化して速度を向上させています。

HTTP1.1 から HTTP2 へのアップグレード

アップグレード前はこんな感じでした

HTTP2.0にアップグレードすると次のようになります

では、どうやってアップグレードするのでしょうか?アップグレードにも条件が必要です。

  • openssl 1.0.2+ (OpenSSL 1.0.2 は ALPN をサポートします)
  • Nginx 1.9.5 以上

nginxとopensslのバージョンを渡すことができるかどうかはわかりません
nginx -V
上記の条件が満たされているかどうかを確認してください。これは簡単です。nginx設定ファイルにhttp2を追加するだけです。

サーバー{
   443 ssl http2 を聞く
   。
   。
   。
}

以上です。とても簡単ですよね?次に、nginx サーバーを再起動します。 (このアップグレードではアクセス速度が大幅に向上することはありません。)

gzipデータ圧縮を有効にする

上図からわかるように、転送列とサイズ列のデータは等しく、つまりファイルのサイズはファイルのサイズと同じであり、圧縮はまったく行われていません。1.4Mなどの大きなファイルの場合、圧縮が非常に必要です。さらに、これは単なる単純なブログサイトです。これが速度を低下させる主な原因の 1 つです。そのため、gzip 圧縮を実行する必要があります。では、gzip を有効にするにはどうすればよいでしょうか?それは非常に難しいですか?実際、それは非常に簡単です。Nginx はすでにこれをサポートしており、必要なのは簡単な設定だけです。同じ方法でnginx設定ファイルを変更します

サーバー{
    443 ssl http2 を聞く
    #...多くの gzip は途中で省略されます。
    gzip_バッファ 32 4k;
    gzip_comp_レベル6;
    gzip_min_length 200;
    gzip_types テキスト/css テキスト/xml アプリケーション/javascript アプリケーション/json;
}

  • gzip on gzip 圧縮が有効であることを意味します。
  • gzip_buffers 32 4k 、リクエストの圧縮を処理するために使用されるバッファの数とサイズを示します。このパラメータを設定する必要はなく、デフォルト値を使用してください。
  • gzip_comp_level gzip 圧縮レベル。レベル 6 以降は増やすことは困難です。
  • gzip_min_length 、返されるコンテンツがこの値(K単位)より大きい場合にのみgzip圧縮を使用します。値が0の場合、すべてのページが圧縮されます。
  • gzip_types圧縮タイプ

同様に、nginx サーバーを再起動します。

図からわかるように、速度が大幅に向上しています。 「転送」列と「サイズ」列を見ると、サイズの違いが非常に大きいことがわかります。これら 2 つの手順を完了すると、速度は 6 秒から約 2 秒に短縮されました。
(このアップグレードはアクセス速度に最も大きな影響を与えます。)

注:もちろん、より良い方法は CDN アクセラレーションを使用することです。静的リソースを CDN します。速度を大幅に向上できます。

実行速度を向上させるためにコードを最適化します

複数のリクエストのテスト中。小さなファイルがまだたくさんありますが、実行にはかなり時間がかかります。もちろん、これはReactがDOMツリーを作成するなどの操作に関連しています。ただし、コードに最適化の余地があるかどうかはまだ確認できます。こんなに小さなウェブサイトにしては遅すぎました。私が書いたコードには時間のかかる処理が含まれているに違いないと思いましたが、実際にそうでした。ウェブサイトのこのコード

const markdownHtml = marked(content_mark || '');

Markdown を HTML に変換するには、ある程度の時間がかかります。記事が非常に大きい場合は、この時間を無視することはできません。
この JS 配列から文字列への実装メソッドをテストして、単語数の多い記事を解析したところ、慣例的に許容できない 100 ミリ秒以上かかりました。

この場合、マークダウンを保存するときに、データのコピーを 2 つ直接保存できます。1 つは元のマークダウン データで、もう 1 つはマークダウンが HTML に変換された後のデータです。ページがレンダリングされると、変換された HTML コードが直接取得されるため、変換時間が節約されます。

また、React の懶加載を利用して、webpack でパッケージ化するときにコードを分割し、最初の画面の読み込みのサイズを縮小することもできます。

もちろん、読み込みプロセス中のユーザーエクスペリエンスを向上させることも重要な部分です。実行速度を効果的に上げることはできませんが、ユーザーの満足度を高めることができます。諺にあるように、幸せな時は時間があっという間に過ぎてしまいます。

Reactホームページの読み込みが遅い問題のパフォーマンス最適化事例の詳細説明に関するこの記事はこれで終わりです。Reactホームページの読み込みが遅い問題のパフォーマンス最適化に関するより関連性の高いコンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMを応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Reactコンポーネントのパフォーマンス最適化に関する簡単な説明
  • immutable.js の使用の必要性を最大限に高める React パフォーマンスの最適化
  • Reactをうまく使いこなすために知っておくべきこと
  • reactjs を使用してプログレスバー ページのパフォーマンスを最適化し、70% 向上させます。

<<:  MySQLのグループカウントと範囲集計を実装する2つの方法

>>:  Nginx/Httpd リバース プロキシ Tomcat 設定チュートリアル

推薦する

Nexus をベースに Alibaba Cloud プロキシ ウェアハウスを構成するプロセスの分析

Nexus のデフォルトのリモートリポジトリは https://repo1.maven.org/ma...

Nginxは特定のページへのIPアクセスを制限します

1.すべてのIPアドレスが3つのページa1.htm、a2.htm、a3.htmにアクセスするのを禁止...

Linux での Python スクリプトの自動起動とスケジュール起動の詳細な手順

1. Pythonは起動時に自動的に実行されますPython の自己起動スクリプトがauto.pyで...

各グループの最新データを取得するためにMySQLベースのグループを実装する

序文:グループ化関数はグループ内の最初のデータを取得しますが、各グループ内の最新のデータを取得する必...

モバイルデバイス Web 開発における HTML ヘッドの書き方

コードをコピーコードは次のとおりです。 <ヘッド> <meta http-equi...

nginx rewriteを使用してURLをリダイレクトする方法

最近仕事でnginxの設定を変更する必要が頻繁にあり、nginxでrewriteを使用する方法を学び...

Vue3.xはコンポーネント通信にmitt.jsを使用します

目次クイックスタート使い方基本原則Vue2.x はコンポーネント通信に EventBus を使用しま...

高度な CSS の 3 つの方法を使用して複数行の省略を実装するサンプル コード

序文これは古くからの要望ですが、オンラインで解決策を探している人はまだ多く、特に検索結果の上位にラン...

プロジェクトにおけるVue3のロジック抽出とフィールド表示についての簡単な説明

目次論理階層化異なる地域から事業を分離するこれを実行する利点このようなシナリオにどう対処するか最適化...

マインスイーパゲームを実装するための jQuery プラグイン (2)

この記事では、jQueryプラグインを使用してマインスイーパゲームを実装する2番目の記事を参考までに...

MySQLユーザーと権限管理の詳細な説明

この記事では、例を使用して MySQL ユーザーと権限の管理について説明します。ご参考までに、詳細は...

Reactは動的ポップアップウィンドウコンポーネントを実装します

UI コンポーネントを作成するときに、アニメーションを考慮しなければ、アニメーションを実現するのは非...

Vue の下部ナビゲーション バー TabBar を実装するための非常に詳細なチュートリアル

目次プロジェクト紹介:プロジェクトディレクトリ: TabBar 効果のプレビュー: TabBar 実...

HTML テーブルの行間隔を変更する方法の例

HTML テーブルを使用する場合、行間隔を変更する必要がある場合がありますが、余白、パディング、折り...

要素ツリーコントロールは、ドロップダウンメニューとアイコンを統合します(ツリー+ドロップダウン+入力)

目次要件:実装手順:この記事では主に以下について説明します: カスタムツリーコントロール<el...