ページがフリーズし、読み込みに時間がかかります。リソース要求が多すぎて要求の応答が遅いことが原因である可能性があります。各ブラウザには同時リソース リクエストの数に制限があります。この記事では、リクエストのブロック状況を確認する方法と、この制限に合わせてフロント エンドを最適化する方法について説明します。
1. リソースの閉塞を確認する方法
F12 キーを押して、次の図に示すようにブラウザ コンソールを表示します。
ウォーターフォールからは、最初の 6 つの GET リクエストは正常ですが、最後のリクエストはすぐには送信されません。最後のリクエストのウォーターフォール ヒストグラムの上にマウスを置くと、フローティング リクエストが表示されます。ウィンドウは下図のようになります。
Connection Start から、このリクエストが 882.56 ミリ秒間ブロックされていることがわかります。
次に、リクエストのアドレスとリクエスト方法をよく観察すると、同じドメイン名、同じリクエスト方法の場合、上限が存在することがわかります。
2. ブラウザリクエストの同時実行性
(1) ルール
同じドメイン名の下では、
①同じGETリクエストの同時実行数は1です。つまり、次のリクエストは前のリクエストが完了した後にのみ実行され、それ以外の場合はキューに入れられ、送信されるのを待ちます。 ; ② 送信時の異なる GET/POST リクエストの同時
数は 6 リクエスト数が 6 に達し、応答が受信されない場合、後続のリクエストはキューに入れられて送信されます。
(2) 理由
これは実際には、さまざまな要因に基づいた最適化の結果です。
- オペレーティング システムのポート リソースの考慮
PC のポートの総数は 65536 であるため、TCP (http も tcp) リンクは 1 つのポートを占有します。通常、オペレーティング システムは、ポート数がすぐに枯渇するのを防ぐために、外部リクエストに対して合計ポートの半分を開きます。
- 過剰な同時実行により、頻繁な切り替えとパフォーマンスの問題が発生します
1 つのスレッドは 1 つの http リクエストに対応するため、同時実行数が膨大になるとスレッドの切り替えが頻繁に発生します。また、スレッド コンテキストの切り替えは軽量のリソースではない場合があります。これにより、利益よりも損失の方が多くなるため、以前の接続を再利用するためにリクエスト コントローラーで接続プールが生成されます。したがって、同じドメイン名の下にある接続プールの最大数は 4 ～ 8 であることがわかります。すべての接続プールを使用すると、後続のリクエストタスクはブロックされ、アイドル状態の接続があるときに後続のタスクが実行されます。
- 同じクライアントからの多数の同時リクエストがサーバーの同時実行しきい値を超えることを回避します。
サーバー側では、悪意のある攻撃を避けるために、通常、同じクライアント ソースに対して同時実行のしきい値が設定されます。ブラウザーが同じドメイン名に対して同時実行の制限を設定していない場合、サーバーが同時実行のしきい値を超えて禁止される可能性があります。
- クライアントの良心メカニズム
2 つのアプリケーションがリソースを横取りするのを防ぐために、強いアプリケーションは無制限のリソースを取得し、弱いアプリケーションは常にブロックされます。
ブラウザーのリソース要求が同時実行される理由 原文: https://blog.csdn.net/zz130428/article/details/128273525
3. 各ブラウザの同時実行性
ブラウザの同時接続数は制限されており、通常は 10 以内で 4 ～ 6 です。
(1) http/https同時接続数
HTTP 1.1 および HTTP 1.0 へのメインストリーム ブラウザの最大同時接続数:
(2) WebSocket同時接続数
4. 同時実行数の制限を解決/最適化する
(1) リソースを異なるドメイン名に分散する
ブラウザの同時接続数の制限は、同じドメイン名に対してのみです。リソースを異なるドメイン名に分散して、同時接続数の拡張を実現します。たとえば、1 つのドメイン名が 10 の場合、2 つのドメイン名は 20 になります。接続。
注: リソース アドレスの異なるポート番号も異なるドメイン名とみなされます。
(2) ネットワークリクエストの削減
- 304 リクエストを構成してリクエスト速度を向上させる (バックエンド構成)
- アイコン、CSS、JS を結合して http リクエストの数を減らす
- キャッシュを使用する場合、cach-control などの強力なキャッシュを使用する場合、または期限切れになる場合、キャッシュが期限切れにならない場合、リクエストはサーバーに送信されません。
- [@import] CSS を使用しない場合、追加のリクエストが発生します
- Vue は動的ルーティングを使用してオンデマンドで js をインポートし、http リクエストの数を減らします
参考https://blog.csdn.net/zz130428/article/details/128273525