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 設定チュートリアル

推薦する

JavaScript Promise の徹底解説

目次1. Promise とは何ですか? 2. なぜ Promise が存在するのでしょうか? 3つ...

CSS でのフレックスレイアウトの詳細な説明

フレックス レイアウトは、エラスティック レイアウトとも呼ばれます。任意のコンテナーをフレックス レ...

Linux で fdisk を使用してディスクをパーティション分割する方法

Linux パーティションでよく使用されるコマンド: fdisk、MBR パーティション テーブルの...

MySQL 完全折りたたみクエリ正規マッチングの詳細な説明

概要前の章では、クエリのフィルター条件について学習しました。MySQL では、like % ワイルド...

MySQLのマスタースレーブ構成を使用して、読み取りと書き込みの分離を実現し、データベースの負荷を軽減します。

大規模な Web サイトでは、多数の同時アクセスを処理するために、Web サイト上の分散負荷分散以上...

Alibaba Cloud ServerにMySQLデータベースをインストールする方法の詳細な説明

序文学習中に Zookeeper をインストールする必要があったため、仮想マシンに常に問題が発生した...

Docker クリーニングキラー/Docker オーバーレイ ファイルがディスク領域を大量に占有する

[インターネット上の移行ファイルをすべて見ると、信頼性が低く、症状のみを治療し、根本的な原因を治療し...

MySQLシリーズのMariaDBサーバーのインストール

目次チュートリアルシリーズ1. yumパッケージマネージャーを使用してMariaDBサーバーをインス...

HTML のボタン タグをクリックしてページにジャンプする 3 つの方法

方法1: onclickイベントを使用する <input type="button&...

Dockerfileを使用してApacheイメージを作成する方法

目次1. Dockerイメージ2. 既存のイメージに基づいてインスタンスを作成する3. ローカルテン...

innerHTML を理解する

<br />関連記事: innerHTML HTML DOM insertRow() メ...

MySQL サービスを完全に削除する方法 (レジストリをクリーンアップする)

序文あるプロジェクトの実行可能ファイルをインストールすると、MySQL 自体をインストールできるよう...

Linux で CPU 使用率が高くなる原因をトラブルシューティングするプロセスの詳細な説明

目次序文始めるステップトラブルシューティング序文CPU 使用率が高くなるのは、オンラインでよくある問...

IDEAでVUEプロジェクトをデバッグするための詳細な手順

js コードをデバッグするには、コード内にデバッガーを記述するか、Chrome で毎回ブレークポイン...

基礎知識: ウェブサイトのアドレスの前の http はどういう意味ですか?

HTTPとは何ですか?ウェブサイトを閲覧したいときは、ブラウザのアドレス バーにウェブサイトのアド...