4

JavaScript が他の JavaScript のダウンロード開始をブロックしないようにするにはどうすればよいですか?

私のウェブサイトには次のようなものがあります。

<html>
<body>
....
<script type="text/javascript" src="http://example.com/ex.js"></script>
<script type="text/javascript" src="http://google.com/google-maps.js"></script>
</body>
</html>

YSlow Firefox アドオンを使用すると、[ネットワーク トラフィック] タブから、ダウンロードが完了google.com/google-maps.jsするまで JavaScript のダウンロードが開始されないことがわかりex.jsます。

質問ex.js: 両方をgoogle-maps.js取得して、すぐに並行してダウンロードを開始するにはどうすればよいですか?

4

4 に答える 4

3

<script>要素のasyncordefer属性を使用します:

両方asyncのdeferスクリプトは、パーサーを一時停止することなくすぐにダウンロードを開始し、オプションのonloadハンドラーをサポートして、スクリプトに依存する初期化を実行する一般的なニーズに対処します。との違いは、スクリプトの実行時asyncにdefer 集中します。各asyncスクリプトは、ダウンロードが完了した後、 windowのloadイベントの前に、最初の機会に実行されます。async これは、スクリプトがページ内で発生する順序で実行されない可能性があることを意味します。一方 defer、スクリプトは、ページ内で発生した順序で実行されることが保証されています。その実行は、解析が完全に終了した後に開始されますが、documentの DOMContentLoadedイベント。

  • deferIE4 以降、Firefox 3.5 以降、Chrome 2 以降、Safari 4 以降でサポートされています。
  • asyncFirefox 3.6 以降、Chrome 7 以降、Safari 5 以降でサポートされています。( IE サポートなし!)

deferあなたの最良の選択です。スクリプトは並行してダウンロードされ、同期的に (順番に)実行されます。また、 よりもサポートが充実しており、予測可能ですasync。(この/の非常に詳細な分析asyncdeferも参照してください。)

<script defer type="text/javascript" src="script.js"></script>
于 2011-05-13T02:48:50.870 に答える
2

これは、HTML のインライン スクリプトでは正常です。次のコードを使用して、スクリプトを動的に追加できます。

<script type="text/javascript">
    var head  = document.getElementsByTagName("head")[0]; 
    var sTag1 = document.createElement("script");
    var sTag2 = document.createElement("script");
    sTag1.type = sTag2.type = "text/javascript";
    sTag1.src = "http://example.com/ex.js";
    sTag2.src = "http://google.com/google-maps.js";
    head.appendChild(sTag1);
    head.appendChild(sTag2);
</script>

ただし、これにより予期しない結果が生じる可能性があります。スクリプト 2 がスクリプト 1 の変数または関数を参照する場合、正しい順序でダウンロードおよび解析されない可能性があります。

スクリプトをロードする前に HTML をロードするだけの場合は、スクリプトを連続させ、head タグではなく HTML ファイルの最後に配置します。これにより、スクリプトをダウンロードして解析する前にページが読み込まれます。http://developer.yahoo.net/blog/archives/2007/07/high_performanc_5.htmlを参照してください。

于 2010-01-26T17:38:54.173 に答える
2

見苦しいですが、JavaScript を使用して DOM 要素を挿入することで、スクリプトを並行してダウンロードできます。

実際の例については、このブログ投稿をご覧ください。

于 2010-01-26T17:35:12.537 に答える
0

JavaScript ファイルは、常に指定された順序でダウンロードされます。

于 2010-01-26T17:34:32.757 に答える