しばらくReactを勉強した後、実践してみたいと思います。そこで、個人のブログのウェブサイトを再構築しました。サイトの再構築には約1週間かかりましたが、いざオンラインになってみると、アクセス速度が本当に遅く、我慢できないほどでした。記事数件しかない小さなサイトなのに、とても遅いので我慢できませんでした。私は完璧主義者ではありませんが、これではだめです。その後、パフォーマンスの研究に時間を費やしました。遅さには理由があることがわかりました。 React のようなフレームワークですか?現在主流のフロントエンド フレームワークである React、Vue、Angular はすべてクライアント側レンダリングを使用します (サーバー側レンダリングはこの記事の範囲外です)。もちろん、これによりサーバーにかかる負荷が大幅に軽減されます。ブラウザに対する相対的な圧力が増大しました。つまり、多数の js ファイルをローカルで実行する必要があります。そして、これらの大きな js ファイルをサーバーからダウンロードするには時間がかかります。これらの js を再度実行するには時間がかかります。これがホームページの読み込みが遅くなる根本的な理由です。もちろんホームページだけですが、後続のキャッシュがあるので比較的高速です。では、速度を上げるにはどうすればいいのでしょうか?始めるには2つの方法があります
具体的な最適化の前に、私のブログ サイトのサーバー構成についてお話しします。
テスト環境はFirefoxブラウザを使用しており、最適化前のアクセス速度は以下のとおりです とても遅いと思いませんか?あまりにも遅いので、自分の人生に疑問を抱くほどです。 2,000 ワード以上のブログ記事を読み込むのに 6 秒かかります。自分のブログを参考に、段階的に最適化していきましょう。 静的リソースのダウンロード速度を向上静的リソースのダウンロード速度を上げる方法は多数あります。 HTTP1.1 から HTTP2.0 にアップグレードしたり、gzip データ圧縮を有効にしたり、CDN を使用したりすることが、速度を向上させる最も効果的な方法です。私のウェブサイトも主にこれらの側面から一つ一つ最適化して速度を向上させています。 HTTP1.1 から HTTP2 へのアップグレード アップグレード前はこんな感じでした HTTP2.0にアップグレードすると次のようになります では、どうやってアップグレードするのでしょうか?アップグレードにも条件が必要です。
nginxとopensslのバージョンを渡すことができるかどうかはわかりません サーバー{ 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; } で
同様に、nginx サーバーを再起動します。 図からわかるように、速度が大幅に向上しています。 「転送」列と「サイズ」列を見ると、サイズの違いが非常に大きいことがわかります。これら 2 つの手順を完了すると、速度は 6 秒から約 2 秒に短縮されました。
実行速度を向上させるためにコードを最適化します複数のリクエストのテスト中。小さなファイルがまだたくさんありますが、実行にはかなり時間がかかります。もちろん、これはReactがDOMツリーを作成するなどの操作に関連しています。ただし、コードに最適化の余地があるかどうかはまだ確認できます。こんなに小さなウェブサイトにしては遅すぎました。私が書いたコードには時間のかかる処理が含まれているに違いないと思いましたが、実際にそうでした。ウェブサイトのこのコード const markdownHtml = marked(content_mark || ''); Markdown を HTML に変換するには、ある程度の時間がかかります。記事が非常に大きい場合は、この時間を無視することはできません。 この場合、マークダウンを保存するときに、データのコピーを 2 つ直接保存できます。1 つは元のマークダウン データで、もう 1 つはマークダウンが HTML に変換された後のデータです。ページがレンダリングされると、変換された HTML コードが直接取得されるため、変換時間が節約されます。 また、React の もちろん、読み込みプロセス中のユーザーエクスペリエンスを向上させることも重要な部分です。実行速度を効果的に上げることはできませんが、ユーザーの満足度を高めることができます。諺にあるように、幸せな時は時間があっという間に過ぎてしまいます。 Reactホームページの読み込みが遅い問題のパフォーマンス最適化事例の詳細説明に関するこの記事はこれで終わりです。Reactホームページの読み込みが遅い問題のパフォーマンス最適化に関するより関連性の高いコンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMを応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQLのグループカウントと範囲集計を実装する2つの方法
>>: Nginx/Httpd リバース プロキシ Tomcat 設定チュートリアル
目次1. Promise とは何ですか? 2. なぜ Promise が存在するのでしょうか? 3つ...
フレックス レイアウトは、エラスティック レイアウトとも呼ばれます。任意のコンテナーをフレックス レ...
Linux パーティションでよく使用されるコマンド: fdisk、MBR パーティション テーブルの...
概要前の章では、クエリのフィルター条件について学習しました。MySQL では、like % ワイルド...
大規模な Web サイトでは、多数の同時アクセスを処理するために、Web サイト上の分散負荷分散以上...
序文学習中に Zookeeper をインストールする必要があったため、仮想マシンに常に問題が発生した...
[インターネット上の移行ファイルをすべて見ると、信頼性が低く、症状のみを治療し、根本的な原因を治療し...
目次チュートリアルシリーズ1. yumパッケージマネージャーを使用してMariaDBサーバーをインス...
方法1: onclickイベントを使用する <input type="button&...
目次1. Dockerイメージ2. 既存のイメージに基づいてインスタンスを作成する3. ローカルテン...
<br />関連記事: innerHTML HTML DOM insertRow() メ...
序文あるプロジェクトの実行可能ファイルをインストールすると、MySQL 自体をインストールできるよう...
目次序文始めるステップトラブルシューティング序文CPU 使用率が高くなるのは、オンラインでよくある問...
js コードをデバッグするには、コード内にデバッガーを記述するか、Chrome で毎回ブレークポイン...
HTTPとは何ですか?ウェブサイトを閲覧したいときは、ブラウザのアドレス バーにウェブサイトのアド...