JavaScript - ページの読み込みが遅いのですが、最適化ソリューションは何ですか?

Question

ページの読み込みが非常に遅い理由を知るのを手伝ってくれる人はいますか? 詳細に分析して、適切な解決策が見つかることを願っています。
オンライン アドレス http://cqwind.chinacloudapp.c...

Answer 1

図を見ると、最も時間がかかるのは Ajax/XHR リクエストです。

静的リソースは非常に速く読み込まれるため、ネットワーク速度が原因である可能性はありません。次のことができます:

1. フロントエンドで HTTP リクエストをマージしてみます。

2. 背景を最適化して応答速度を向上させます。 (状況を見ると、最も重要な場所はここであるはずです。背景があなたを責めている場合は、Postman などのツールを使用するなど、別の場所で HTTP リクエストをシミュレートし、事実をそのまま語らせてください。)

Answer 2

1. js、cssを圧縮します、見たとしても圧縮されていません

2.画像を圧縮する

3. CSSをパッケージ化するか、初回読み込み時に読み込みレイヤーを作成することをお勧めします

これらのリソース ファイルを圧縮してパッケージ化するのが最善です。これは gulp で簡単に実現できます。より良いユーザー エクスペリエンスを提供したい場合は、最初の訪問時にすべてのリソースとバンドルをロードして、読み込みレイヤー。後続の動的データは、回転するか、WebSocket として直接使用する必要があります

また、注意深く調べたところ、データの呼び出しにはかなり時間がかかることがわかりました。そのため、バックエンドの最適化を行う必要があることが推奨されます。 Google には、提案を提供するヘルスチェック ツールもあります

Answer 3

1. クライアントとサーバーのネットワークを確認してください。40 秒は通常異常です。

2. Chrome -> F12 -> 監査

の提案を注意深く読んでください。

3. png すべてを webP に変換します。少なくとも tinyPNG を使用してください。

読み込みを妨げている静的リソースを見つけて、CDN に移動します。

4. http/2 をアップグレード；

5. プリロード/ローカルキャッシュ

6. JSP でない場合は、nginx などの Tomcat を置き換えます。

Answer 4

1. 時間のかかる計算部分は通常の処理のためにバックグラウンドに任せることができ、結果はキャッシュされ、ページはキャッシュを直接呼び出すことができます

2. 計算ロジックを最適化する

3. 検出時間SQL