JavaScript スクリプト ファイルを HTML にロードする一般的な方法の概要

ブラウザーが (埋め込まれた) 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグに遭遇した場合、現在のブラウザーは JavaScript がページのコンテンツを変更するかどうかを知る方法がありません。したがって、ブラウザーはこの時点でページの処理を停止し、最初に JavaScript コードを実行してから、ページの解析とレンダリングを続行します。 src 属性を使用して JavaScript (つまり、外部リンク JavaScript) を追加するプロセスでも同じ状況が発生します。ブラウザは、まず外部リンク ファイル内のコードをダウンロードするのに時間を費やし、それからそれを解析して実行する必要があります。このプロセス中、ページのレンダリングとユーザーの操作は完全にブロックされます。

つまり、ブラウザが 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグ (インラインリンクか外部リンクか) を解析するたびに、ブラウザはタグ内の JavaScript コードのダウンロード、解析、実行を (単独で) 優先し、ダウンロードをブロックします。後続のすべてのページコンテンツのレンダリング。

方法 1: 従来のアプローチ

最も伝統的な方法は、head タグに 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグを挿入することです。

しかし、この従来のアプローチには重大なパフォーマンスの問題が隠されています。 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグの特性に関する上記の説明によれば、この例では、ブラウザが 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグを解析すると、その後のコンテンツの解析を停止し、最初にスクリプト ファイルをダウンロードすることがわかります。このコードは、後続の test.css スタイル ファイルと 6c04bd5ca3fcae76e30b72ad730ca86d タグを読み込むことができないため、ページをレンダリングできないことを意味します。したがって、JavaScript コードが完全に実行されるまで、ページは空白になります。

<script type="text/javaScript" src="example.js"></script>

方法 2: 古典的なアプローチ

3f1c4e4b6b16bbbd69b2ee476dc4f83a タグは後続のコンテンツの読み込みをブロックするため、すべてのページ コンテンツの後に 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグを置くことで、この悪い状況を回避できますか? ページの残りの部分のダウンロードへの影響を最小限に抑えるために、すべての 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグを 6c04bd5ca3fcae76e30b72ad730ca86d タグの下部にできるだけ近づけて配置します。

スクリプトの並列ダウンロードは IE8 以降のブラウザーに実装されていますが、一部のブラウザーでは (スクリプト ファイルが 6c04bd5ca3fcae76e30b72ad730ca86d タグの最後に配置されている場合でも)、ページ内のスクリプトが引き続き次々に読み込まれます。したがって、次の方法が必要になります。それは、スクリプトを動的にロードすることです。

方法 3: 動的スクリプト

ドキュメント オブジェクト モデル (DOM) を使用すると、ページ上のほぼどこにでも作成できます。

<script type=&#39;text/javascript&#39;>
  var script = document.createElement(&#39;script&#39;);
  script.type = &#39;text/javaScript&#39;;
  script.src = &#39;file1.js&#39;;
  document.getElementsByTagName(&#39;head&#39;)[0].appendChild(script);
</script>

上記のコードは、外部リンク file1 の 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグを動的に作成し、それを 93f0f5c25f18dab9d176bd4f6de5d30e タグに追加します。このテクノロジーの重要な点は次のとおりです:

いつダウンロードが開始されたとしても、ファイルのダウンロードと実行のプロセスは、ページ上の他のプロセス (スクリプトの読み込みを含む) をブロックしません。
しかし、この方法にも欠陥があります。このメソッドでロードされたスクリプトは、ダウンロードの完了後すぐに実行されます。つまり、複数のスクリプト間の実行順序は保証されません (Firefox と Opera を除く)。スクリプトが別のスクリプトに依存している場合、エラーが発生する可能性があります。たとえば、jQuery コードを作成するには、jQuery ライブラリをインポートする必要がありますが、作成した jQuery コード ファイルが最初にダウンロードされ、すぐに実行される可能性があります。この時点で、ブラウザは「jQuery が存在しません」というエラーを報告します。 「define」など、この時点では jQuery が定義されていないため、ライブラリはまだダウンロードされていません。そのため、次の改善が行われました:

<script type=&#39;text/javascript&#39;>
  function loadScript(url, callback) {
    var script = document.createElement(&#39;script&#39;);
    script.type = "text/javaScript";
    // IE和opera支持onreadystatechange
    // safari、chrome、opera支持onload
    if (script.readyState) {//IE
      script.onreadystatechange = function() {
        if (script.readyState == "loaded"
            || script.readyState == "complete") {
          script.onreadystatechange = null;
          callback();
        }
      };
    } else {//其他浏览器
      script.onload = function() {
        callback();
      };
    }
    script.src = url;
    document.getElementsByTagName(&#39;head&#39;)[0].appendChild(script);
  }
</script>

上記のコードの改善は、対応するスクリプト ファイルがロードされた後に呼び出されるコールバック関数を追加することです。このようにして、順次ロードを実現できます。記述は次のようになります (file2 が file1 に依存し、file1 と file3 が互いに独立していると仮定します):

loadScript(‘file1.js',function(){ loadScript(‘file2.js',function(){}); }); loadScript(‘file3.js',function(){});

file2 は file1 がロードされた後にロードを開始し、file1 が確実にロードされるようにします。 file2 が実行される前に準備が完了しています。 File1 と file3 は並行してダウンロードされ、相互に影響しません。 loadScript 関数は十分に優れていますが、まだ不十分な点がいくつかあります。このコードを分析すると、loadScript 関数の順次ロードはスクリプトのロードをブロックすることによって実装されていることがわかります (上記の赤いテキストで指摘されているように)。私たちが本当に実現したいのは、スクリプトが同期的にダウンロードされ、対応する順序で実行されることです。つまり、並行してロードされ、順番に実行されます。

以上がJavaScript スクリプト ファイルを HTML にロードする一般的な方法の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。