JavaScript中文件同步與異步加載的方法介紹

來源：懂視網責編：小采時間：2020-11-27 20:14:12

JavaScript中文件同步與異步加載的方法介紹

JavaScript中文件同步與異步加載的方法介紹:對于JS文件的引用，盡管當前有不少框架和工具（比如webpack，commonjs，requiresjs等）都做了很好的處理。但是拋開這些框架，了解原生的加載方式還是不無裨益。本文簡述一些js文件的同步和異步加載方式。同步加載可在html文件里以<script>

推薦度：

點擊下載本文 文檔為doc格式

導讀JavaScript中文件同步與異步加載的方法介紹:對于JS文件的引用，盡管當前有不少框架和工具（比如webpack，commonjs，requiresjs等）都做了很好的處理。但是拋開這些框架，了解原生的加載方式還是不無裨益。本文簡述一些js文件的同步和異步加載方式。同步加載可在html文件里以<script>

對于JS文件的引用，盡管當前有不少框架和工具（比如webpack，commonjs，requiresjs等）都做了很好的處理。但是拋開這些框架，了解原生的加載方式還是不無裨益。本文簡述一些js文件的同步和異步加載方式。

同步加載

可在html文件里以<script>標簽插入，這是初學時最基本的方式。

準備兩個js文件如下：

calc1.js

calc2.js

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('script');
 script1.src='calc1.js';
 script1.type='text/javascript';

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

 document.getElementsByTagName('head')[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('script');
 script.src= file;
 script.type='text/javascript';
 // 監聽onload時間，當前js文件加載完成后，再加載下一個
 script.onload = callbackFn;
 document.getElementsByTagName('head')[0].appendChild(script)
 }
 
 loadScript('calc1.js', function () {
 loadScript('calc2.js');
 } );

 </script>
</head>

這樣就能永遠輸出正確結果了。

通過 AJAX 加載JS文件

也能正確的輸出結果。

總結

如果是單一或少數js文件，可以在html body的最后插入script標簽，以同步方式加載。Webpack其實也是把多個js文件合并稱一個，然后在body插入script引用。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com