Application.jsスクリプトイメージが

Question

をロードするまで、私たちのサイトには、非同期でロードapplication.jsました：

<script async="async" src="//...application-123456.js"></script>

はまた、我々は、（1）サードパーティのスクリプトがたくさんあります（2）より大きなスクリプトが呼び出されるasync <script>タグを順に作成します。

例を挙げれば、これらのサードパーティ製のスクリプトの1つはGoogle's gpt.jsです（どのように動作するかを簡単に知ることができます）。

私たちの問題は、すべてのサードパーティ製のスクリプトが期待どおりに非同期に読み込まれる間、application.jsは4秒以上 "キューイング"状態でスタックすることです。 <script>要素を作成し、「SRC」属性を設定し、それをロードします：

<script async> 
    (function() { 
     var elem = document.createElement('script'); 
     elem.src = 'http://...application-123456.js'; 
     elem.async = true; 
     elem.type = 'text/javascript'; 
     var scpt = document.getElementsByTagName('script')[0]; 
     scpt.parentNode.insertBefore(elem, scpt); 
    })(); 
</script> 

が、何も変わっていない

は、私は、スクリプトを変更すると、それは第三者のもののようにロード作ってみました。

私は、画像をほとんど含んでいない当サイトのページでネットワークカスケードを研究し、キューイング時間がほぼゼロであることを確認しました。 異なる量の画像を持つページで同じ実験を試み、より多くの画像があるページでは待ち時間が比例して増加することがわかりました。

私はChrome's network cascade documentationでこれを読んで：

キューイング時間を：それは（そのようなスクリプト/スタイルなど）、重要なリソースよりも優先度の低いと考えられているため、要求は、レンダリングエンジンにより延期されました。これは画像でよく起こります。

何らかの理由でブラウザがapplication.jsを「優先度が低い」とマークしている可能性はありますか？私はウェブを見て、誰もキューイング時間に問題を経験していないようだ。誰もがアイデアを持っていますか？

ありがとうございました。

Answer 1

ブラウザは、ネットワーク使用率を向上させるためにプリローダーを使用します。 This articleはその概念を説明しています。 Chrome Documentationあなたは上記にリンクされて

、それはキューイングについては、次の言葉：

要求はそれがあることが示さキューに登録されている場合：ので、レンダリングエンジン：要求が延期された

• クリティカルなリソース（スクリプトやスタイルなど）よりも優先度が低いと考えられています。これは画像でよく起こります。
• 利用できないTCP ソケットが解放されるのを待つために要求が保留されました。ブラウザは、HTTP 1上の起点ごとに6つのTCP接続しか許可しないため、要求は保留になりました。
• ディスクキャッシュエントリを作成するのに費やす時間（通常は非常に高速です。）

プレローダーは、このようなスタイルやスクリプトなど、すぐに軽量なリソースを取得し、その後、上記示唆する基準として、唯一の6 TCP接続が起源ごとに許可されている、ので、画像をキューに入れられているだろう。したがって、これはトータル応答時間の遅延を説明します。

最新の質問

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 関連する問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.