ホームページ > 記事 > ウェブフロントエンド > JavaScriptファイルの同期・非同期読み込みを実現する方法の解説

JavaScriptファイルの同期・非同期読み込みを実現する方法の解説

巴扎黑オリジナル: 2017-08-21 09:38:152072ブラウズ

この記事では、主に JavaScript ファイルの同期および非同期読み込みの実装コードを紹介します。興味がある人はそれについて学ぶことができます。

現在、多くのフレームワークやツール (webpack など) を参照しています。、commonjs、requiresjs など）はすべて非常にうまく処理されています。ただし、これらのフレームワークとは別に、ネイティブの読み込み方法を理解することは依然として役に立ちます。この記事では、いくつかの js ファイルの同期および非同期読み込み方法について簡単に説明します。

同期読み込み

は、3f1c4e4b6b16bbbd69b2ee476dc4f83aタグを使用してHTMLファイルに挿入できます。これは、最初に学習する際の最も基本的な方法です。

以下の2つのjsファイルを用意します:

calc1.js

console.log(&#39;calc1 loading begin&#39;)

function add(...args) {
  return args.reduce((currentTotal, i) => currentTotal + i, 0);
}
console.log(&#39;calc1 loading end&#39;)

calc2.js

console.log(&#39;calc2 loading begin&#39;)

console.log(add(1,2,3))

console.log(&#39;calc2 loading end&#39;)

calc2.jsはcalc1.jsに依存しています。

html ファイルは次のとおりです:

<body>

  <script src="calc1.js">
  </script>
  
  <script src="calc2.js">
  </script>
</body>

このように、ファイルの読み込みは同期的に行われます。つまり、calc2.js は calc1.js がロードされた後にのみロードされるため、calc2.js が常に calc1 の add 関数を正しく呼び出せることが保証されます。 Chrome でのデバッグ結果は次のとおりです。

ただし、複数のファイルがある場合、合計の読み込み時間が非常に長くなり、ユーザーインターフェイスの応答がブロックされるという欠点もあります。

スクリプト要素による非同期読み込み

非同期読み込みの利点は、複数の js ファイルを同時に読み込むことができ、非同期であるため、ユーザーインターフェイスとユーザーエクスペリエンスをブロックしないことです。いいね。もちろん、依存ファイルのロード順序が保証できないという欠点があります。 Chrome の

html コード

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
    var script1 = document.createElement(&#39;script&#39;);
    script1.src=&#39;calc1.js&#39;;
    script1.type=&#39;text/javascript&#39;;

    var script2 = document.createElement(&#39;script&#39;);
    script2.src=&#39;calc2.js&#39;;
    script2.type=&#39;text/javascript&#39;;

    document.getElementsByTagName(&#39;head&#39;)[0].appendChild(script1).appendChild(script2);
  </script>
</head>

のデバッグ結果は、次のように正しく出力される場合があります:

ただし、最初に clac1.js がロードされていないため、calc2 のときにエラーが報告される場合があります。 jsが実行されます。

次に、読み込み順序の問題を解決し、calc1.js が最初に読み込まれるようにする必要があります。

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
    function loadScript(file, callbackFn) {
      var script = document.createElement(&#39;script&#39;);
      script.src= file;
      script.type=&#39;text/javascript&#39;;
      // 监听onload时间，当前js文件加载完成后，再加载下一个
      script.onload = callbackFn;
      document.getElementsByTagName(&#39;head&#39;)[0].appendChild(script)
    }
    
    loadScript(&#39;calc1.js&#39;, function () {
      loadScript(&#39;calc2.js&#39;);
    } );

  </script>
</head>

これは常に正しい結果を出力します。

AJAX を介して JS ファイルをロードする

 <script>
    function loadScript(file, callbackFn) {
      var xhr = new XMLHttpRequest();
      xhr.open(&#39;get&#39;, file, true);
      // for IE
      if (xhr.onreadystatechange) {
        xhr.onreadystatechange = function () {
          console.log(xhr.readyState, xhr.status);
          if (xhr.readyState == 4) {
            if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
              insertScriptText(xhr.responseText);
              if (callbackFn) {
                callbackFn();
              }
            }
          }
        }
      } else {
        xhr.onload = function () {
          insertScriptText(xhr.responseText);
          if (callbackFn) {
            callbackFn();
          }
        }
      }
      xhr.send(null);
    }

    function insertScriptText(scriptText) {
      var script = document.createElement(&#39;script&#39;);
      script.type = &#39;text/javascript&#39;;
      script.text = scriptText;
      document.body.appendChild(script);
    }

    loadScript(&#39;calc1.js&#39;, function () {
      loadScript(&#39;calc2.js&#39;);
    });

  </script>

も結果を正しく出力できます。

概要

単一または少数の js ファイルの場合は、html 本文の最後に script タグを挿入して同期的に読み込むことができます。 Webpack は実際に複数の js ファイルを 1 つにマージし、本体にスクリプト参照を挿入します。

複数の js ファイルがある場合は、インターフェイスのレンダリングのブロックを回避し、全体の読み込み時間を短縮するために、それらを非同期的にロードすることをお勧めします。この記事では、script 要素と Ajax という 2 つの方法を紹介し、依存関係のあるファイルの読み込みシーケンスの例も示します。

以上がJavaScriptファイルの同期・非同期読み込みを実現する方法の解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScript タイマーの setTimeout() と setInterval() の詳細な説明次の記事：JavaScript タイマーの setTimeout() と setInterval() の詳細な説明

続きを見る