しばらく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 設定チュートリアル
Nexus のデフォルトのリモートリポジトリは https://repo1.maven.org/ma...
1.すべてのIPアドレスが3つのページa1.htm、a2.htm、a3.htmにアクセスするのを禁止...
1. Pythonは起動時に自動的に実行されますPython の自己起動スクリプトがauto.pyで...
序文:グループ化関数はグループ内の最初のデータを取得しますが、各グループ内の最新のデータを取得する必...
コードをコピーコードは次のとおりです。 <ヘッド> <meta http-equi...
最近仕事でnginxの設定を変更する必要が頻繁にあり、nginxでrewriteを使用する方法を学び...
目次クイックスタート使い方基本原則Vue2.x はコンポーネント通信に EventBus を使用しま...
序文これは古くからの要望ですが、オンラインで解決策を探している人はまだ多く、特に検索結果の上位にラン...
目次論理階層化異なる地域から事業を分離するこれを実行する利点このようなシナリオにどう対処するか最適化...
この記事では、jQueryプラグインを使用してマインスイーパゲームを実装する2番目の記事を参考までに...
この記事では、例を使用して MySQL ユーザーと権限の管理について説明します。ご参考までに、詳細は...
UI コンポーネントを作成するときに、アニメーションを考慮しなければ、アニメーションを実現するのは非...
目次プロジェクト紹介:プロジェクトディレクトリ: TabBar 効果のプレビュー: TabBar 実...
HTML テーブルを使用する場合、行間隔を変更する必要がある場合がありますが、余白、パディング、折り...
目次要件:実装手順:この記事では主に以下について説明します: カスタムツリーコントロール<el...