首頁  >  文章  >  web前端  >  JavaScript中檔案同步與非同步載入的方法介紹

JavaScript中檔案同步與非同步載入的方法介紹

黄舟
黄舟原創
2017-08-20 09:49:101504瀏覽

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

同步載入

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

準備兩個js檔案如下:

calc1.js


#
console.log('calc1 loading begin')

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

calc2.js


console.log('calc2 loading begin')

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

console.log('calc2 loading end')

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引用。

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

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