首頁 > 文章 > web前端 > 實作JavaScript檔案同步與非同步載入的方法講解

實作JavaScript檔案同步與非同步載入的方法講解

巴扎黑原創: 2017-08-21 09:38:152071瀏覽

本篇文章主要介紹了JavaScript檔案的同步和非同步載入的實作程式碼，具有一定的參考價值，有興趣的可以了解一下

對於JS檔案的引用，儘管目前有不少框架和工具（如webpack，commonjs，requiresjs等）都做了很好的處理。但拋開這些框架，了解原生的載入方式還是不無裨益。本文簡述一些js檔案的同步和非同步載入方式。

同步載入

可在html檔案裡以3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤插入，這是初學時最基本的方式。

準備兩個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>

這種方式下，檔案載入是同步的。即calc1.js載入完成後，才載入calc2.js，所以保證了calc2.js總是能正確地呼叫calc1裡的add函數。在Chrome裡的調試結果如下：

但同步載入的缺點也明顯，如果有多個檔案的時候，全部載入時間會很長，而且阻塞使用者介面響應。

透過Script Element非同步載入

#非同步載入的優點是，能夠同時載入多個js文件，而且由於是異步，不會阻塞使用者介面，使用者體驗好。當然缺點是，不能保證有依賴關係的文件的載入順序。

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>

在Chrome裡的偵錯結果有時候能正確的輸出如下：

但有時候由於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 body的最後插入script標籤，以同步方式載入。 Webpack其實也是把多個js檔案合併稱一個，然後在body插入script引用。

如果是多個js文件，建議非同步加載，以避免阻塞介面渲染，也縮短整體載入時間。本文介紹了script element和Ajax兩種方式，對於有依賴關係的檔案載入順序，也做了實例。

以上是實作JavaScript檔案同步與非同步載入的方法講解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：JavaScript計時器中關於setTimeout()與setInterval()的詳解下一篇：JavaScript計時器中關於setTimeout()與setInterval()的詳解

看更多