18

以下の 2 つのソリューションの違いは何ですか? 特に、1 よりも 2 を優先する正当な理由はありますか?状況 ）

1 - 一番下のスクリプト

<html>
<body>
...
...
<script src='myScript.js'></script>
</body>
</html>

2 - 一番下のスクリプトは外部スクリプトを読み込みます

<html>
<body>
...
...
<script>
    // minimal script to load another script
    var script = document.createElement('script');
    script.src = 'myScript.js'
    document.body.appendChild(script);
</script>
</body>
</html>
4

5 に答える 5

5

1.一番下のスクリプト

「同期」スクリプト タグを使用すると、スクリプトが読み込まれて実行されるまで、ブラウザによるページのレンダリングがブロックされます。この方法には次の効果があります。

  • script タグを配置する場所に関係なく、スクリプトがダウンロードされて実行されるまで、ブラウザはDOMContentLoadedを起動できません。

  • このようなスクリプト タグを一番下に配置しても、スクリプトによってブロックされる前にブラウザーがすべてのコンテンツをレンダリングしたことを確認するだけです。

2. 一番下のスクリプトは外部スクリプトを読み込みます

JavaScript を使用してスクリプト タグを挿入すると、ブラウザをブロックしない「非同期」スクリプト タグが作成されます。この方法には次の効果があります。

  • スクリプト タグを生成する JavaScript コードを配置する場所に関係なく、ブラウザは、ページをブロックすることなく、利用可能になるとすぐにそれを実行します。DOMContentLoaded は必要なときに起動します。スクリプトがダウンロード/実行されたかどうかに関係なく。

2 番目の方法には、次の利点があります。

  • スクリプト タグを挿入するスクリプトは、ドキュメント ヘッドを含む任意の場所に配置できます。
  • スクリプトはレンダリングをブロックしません。
  • DOMContentLoaded イベントはスクリプトを待機しません。

2 番目の方法には、次の欠点があります。

  • document.writeそのようなスクリプトでは使用できません。そうした場合、そのようなステートメントによってドキュメントが完全に消去される可能性があります。
  • 非同期実行は、ブラウザーがページの解析を終了したことを意味するものではありません。利用可能になるとすぐにスクリプトが実行されることを念頭に置いてください。
  • 実行順序は保証されません。例: 挿入されたスクリプト タグを使用して「library.js」と「use-library.js」をロードすると、「use-library.js」が「library.js」の前にロードおよび実行される可能性があります。

そうは言っても、スクリプトをロードする別の方法があり、3 つのバリエーションがあります。

<script src="myScript.js" async></script>
<script src="myScript.js" defer></script>
<script src="myScript.js" async defer></script>

Steve Souders の仕事に関して: 彼はブロックせずにスクリプトをロードするための 6 つのテクニックを提案しました。HTML5 で導入された属性と属性は、Script DOM Element および Script Defer 手法をカバーしておりasync、それらのブラウザーサポートは、他の手法を心配するのに十分です。defer

于 2014-04-09T08:40:38.753 に答える
3

スクリプトを初期化するこれら 2 つの方法は基本的に同じですが、結果を直接入力できる場合は 2 番目の方法を使用する理由はありません。ただし、たとえばメソッドで 2 番目の例をラップすると$(document).ready()、一種の遅延読み込み効果が発生します。これは基本的に、ページが最初に読み込まれ、ページの読み込みが完了した後にスクリプトが読み込まれることを意味します。もちろん、この方法で特定のスクリプトを初期化するメソッドを作成することもできます。特定の状況でのみ使用される大きなスクリプトがある場合に便利です。これにより、必要でない限りロードされなくなり、全体のロード時間が短縮されます。

于 2014-03-31T09:43:56.587 に答える
2

これはあなたの質問に対する直接的な回答ではありませんが、とにかく知っておくとよいでしょう。

2 番目のアプローチは、ライブラリのフォールバックとして使用されることがあります。
たとえば、Google CDN から jQuery をロードします。ただし、何らかの理由で失敗した場合は、自分のローカル コピーから jQuery をロードしてください。

人気のある HTML5 ボイラープレートで推奨されている方法は次のとおりです。

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')</script>
于 2014-04-09T05:30:49.450 に答える