7

これは HTML5 Boilerplate のindex.htmlのタグの直前です。</body>

<!-- JavaScript at the bottom for fast page loading: http://developer.yahoo.com/performance/rules.html#js_bottom -->

<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.7.2.min.js"><\/script>')</script>

<!-- scripts concatenated and minified via build script -->
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- end scripts -->

<!-- Asynchronous Google Analytics snippet. Change UA-XXXXX-X to be your site's ID.
     mathiasbynens.be/notes/async-analytics-snippet -->
<script>
  var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
  (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
  g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
  s.parentNode.insertBefore(g,s)}(document,'script'));
</script>

スクリプト タグが並列ダウンロードをブロックする可能性があることはわかっています。

私の質問:ブラウザは、jQuery が完全にダウンロードされて実行されるのを待ってから、ダウンロードを開始plugins.jsしますscript.jsか?

それとも、先を見越してすべてのスクリプトのダウンロードを可能な限り迅速に (並行して)開始し、前のスクリプトの実行が完了するまで各スクリプトの実行を遅らせるだけですか?

4

3 に答える 3

9

私の質問: ブラウザは、jQuery が完全にダウンロードされて実行されるのを本当に待ってから、ダウンロードを開始しplugins.js、次に をダウンロードしscript.jsますか?

そうかもしれないし、そうでないかもしれませんが、おそらくそうではありません。ブラウザーは (制限内で) ダウンロードを並列化して、ページの読み込みを高速化しようとします。

それとも、先を見越してすべてのスクリプトのダウンロードを可能な限り迅速に (並行して) 開始し、前のスクリプトの実行が完了するまで各スクリプトの実行を遅らせるだけですか?

その部分は仕様で必要とされているためです(asyncまたはdefer属性がない場合)。また、例が示すように、スクリプトが別のスクリプトを挿入する可能性があるため、スクリプトが実行されるまで、スクリプトの実行順序を必ずしも決定することさえできません。ただし、それらをダウンロードして準備することはできます。

于 2012-05-21T07:58:13.243 に答える
2

http://www.html5rocks.com/en/tutorials/speed/script-loading/のコンテンツの下にコピーされたこの詳細は、この質問に対するより適切な回答であることがわかりました。詳細については、それを参照してください。

<script src="//other-domain.com/1.js"></script>

<script src="2.js"></script>

ああ、至福のシンプルさ。ここで、ブラウザは両方のスクリプトを並行してダウンロードし、順序を維持しながらできるだけ早く実行します。「2.js」は「1.js」が実行される (または実行に失敗する) まで実行されず、「1.js」は前のスクリプトまたはスタイルシートが実行されるまで実行されません。

残念ながら、ブラウザは、これらすべてが発生している間、ページのそれ以上のレンダリングをブロックします。これは、document.write など、パーサーが咀嚼するコンテンツに文字列を追加できる「Web の最初の時代」の DOM API によるものです。新しいブラウザーは引き続きバックグラウンドでドキュメントのスキャンまたは解析を行い、必要な外部コンテンツ (js、画像、css など) のダウンロードをトリガーしますが、レンダリングは引き続きブロックされます。

これが、スクリプト要素をドキュメントの最後に配置することをパフォーマンスの世界の優れた人物が推奨する理由です。これは、可能な限りコンテンツをブロックしないためです。残念ながら、すべての HTML をダウンロードするまでスクリプトはブラウザーに表示されず、その時点までに CSS、画像、iframe などの他のコンテンツのダウンロードが開始されます。最新のブラウザーは、画像よりも JavaScript を優先するほどスマートですが、もっとうまくやることができます。

于 2014-07-09T17:11:06.473 に答える
1

HTML5仕様には次のように書かれています：

どちらの属性 [つまり、async と defer] も存在しない場合、ユーザー エージェントがページの解析を続行する前に、スクリプトがフェッチされ、すぐに実行されます。

ページが解析されない場合、ユーザー エージェントは、後続のどのリソースをフェッチする必要があるかを認識できないため、厳密に適合するブラウザーは、最初のリソースが実際に実行されるまで、それ以上のリソースをフェッチできないはずです。

これが理にかなっている理由を理解するために、最初のスクリプトに次のものが含まれていると想像してください。

document.write("<!--");

一致するコメント クロージャがない場合、マークアップ内のスクリプトに続くものはすべて、次のスクリプトに-->遭遇するまでコメントの一部になります。これにより、1 つ以上のリソース参照がスキップされる場合があります。

于 2012-05-21T08:49:39.773 に答える