ホームページ ウェブフロントエンド jsチュートリアル JavaScript でのファイル同期と非同期読み込みメソッドの概要

JavaScript でのファイル同期と非同期読み込みメソッドの概要

Aug 20, 2017 am 09:49 AM
javascript js 負荷

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

同期読み込み

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

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

calc1.js


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

function add(...args) {
  return args.reduce((currentTotal, i) =&gt; 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 ファイルは次のとおりです:


&lt;body&gt;

  &lt;script src=&quot;calc1.js&quot;&gt;
  &lt;/script&gt;
  
  &lt;script src=&quot;calc2.js&quot;&gt;
  &lt;/script&gt;
&lt;/body&gt;
ログイン後にコピー

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

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

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

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

html コード


&lt;head&gt;
  &lt;meta charset=&quot;UTF-8&quot;&gt;
  &lt;title&gt;Title&lt;/title&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
    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);
  &lt;/script&gt;
&lt;/head&gt;
ログイン後にコピー

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

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

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


&lt;head&gt;
  &lt;meta charset=&quot;UTF-8&quot;&gt;
  &lt;title&gt;Title&lt;/title&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
    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;);
    } );

  &lt;/script&gt;
&lt;/head&gt;
ログイン後にコピー

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

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


 &lt;script&gt;
    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 &gt;= 200 &amp;&amp; xhr.status &lt; 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;);
    });

  &lt;/script&gt;
ログイン後にコピー

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

概要

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

以上がJavaScript でのファイル同期と非同期読み込みメソッドの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Illustrator でのプラグインの読み込みエラー [修正] Illustrator でのプラグインの読み込みエラー [修正] Feb 19, 2024 pm 12:00 PM

Illustrator でのプラグインの読み込みエラー [修正]

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 Dec 17, 2023 pm 02:54 PM

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法

Stremio の字幕が機能しない; 字幕の読み込みエラー Stremio の字幕が機能しない; 字幕の読み込みエラー Feb 24, 2024 am 09:50 AM

Stremio の字幕が機能しない; 字幕の読み込みエラー

株価分析に必須のツール: PHP と JS を使用してローソク足チャートを描画する手順を学びます 株価分析に必須のツール: PHP と JS を使用してローソク足チャートを描画する手順を学びます Dec 17, 2023 pm 06:55 PM

株価分析に必須のツール: PHP と JS を使用してローソク足チャートを描画する手順を学びます

推奨: 優れた JS オープンソースの顔検出および認識プロジェクト 推奨: 優れた JS オープンソースの顔検出および認識プロジェクト Apr 03, 2024 am 11:55 AM

推奨: 優れた JS オープンソースの顔検出および認識プロジェクト

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー Dec 17, 2023 pm 05:30 PM

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー

PHP および JS 開発のヒント: 株価ローソク足チャートの描画方法をマスターする PHP および JS 開発のヒント: 株価ローソク足チャートの描画方法をマスターする Dec 18, 2023 pm 03:39 PM

PHP および JS 開発のヒント: 株価ローソク足チャートの描画方法をマスターする

ハイパーリンクを挿入すると Outlook がフリーズする ハイパーリンクを挿入すると Outlook がフリーズする Feb 19, 2024 pm 03:00 PM

ハイパーリンクを挿入すると Outlook がフリーズする

See all articles