JavaScript文件的同步和異步加載

williamwen1986 發布于2019-08-21 12:01 / 623人閱讀

摘要：本文簡述一些文件的同步和異步加載方式。當然缺點是，不能保證有依賴關系的文件的加載順序。總結如果是單一或少數文件，可以在的最后插入標簽，以同步方式加載。如果是多個文件，建議異步加載，以避免阻塞界面渲染，也縮短整體加載時間。

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

同步加載

可在html文件里以

這種方式下，文件加載是同步的。即calc1.js加載完成后，才加載calc2.js，所以保證了calc2.js總能正確地調用calc1里的add函數。在Chrome里的調試結果如下：

但同步加載的缺點也明顯，如果有多個文件的時候，全部加載時間會很長，而且阻塞用戶界面響應。

通過Script Element異步加載

異步加載的優點是，能夠同時加載多個js文件，而且由于是異步，不會阻塞用戶界面，用戶體驗好。當然缺點是，不能保證有依賴關系的文件的加載順序。

html 代碼


    
    Title

在Chrome里的調試結果有時候能正確的輸出如下：

但有時候由于clac1.js沒有被先加載，calc2.js執行時會報錯。

那么我們就得需要解決加載順序問題，保證calc1.js先加載。


    
    Title

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

通過 AJAX 加載JS文件

也能正確的輸出結果。

總結

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

如果是多個js文件，建議異步加載，以避免阻塞界面渲染，也縮短整體加載時間。本文介紹了script element和Ajax兩種方式，并且對于有依賴關系的文件加載順序，也做了實例。請參考 https://github.com/JackieGe/a...

云服務器 GPU云服務器同步和異步同步回調和異步回調同步調用和異步調用同步通信和異步通信

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87354.html

JavaScript模塊化編程探索

摘要：模塊化編程，已經成為一個迫切的需求。隨著網站功能逐漸豐富，網頁中的也變得越來越復雜和臃腫，原有通過標簽來導入一個個的文件這種方式已經不能滿足現在互聯網開發模式，我們需要團隊協作模塊復用單元測試等等一系列復雜的需求。隨著網站逐漸變成互聯網應用程序，嵌入網頁的Javascript代碼越來越龐大，越來越復雜。網頁越來越像桌面程序，需要一個團隊分工協作、進度管理、單元測試等等......開發...

jayzou 2019-08-20 16:22 評論0 收藏0
JavaScript單線程、加載與模塊化

摘要：單線程與瀏覽器多線程是單線程的因為運行在瀏覽器中，是單線程的，每個一個線程。若以多線程的方式操作這些，則可能出現操作的沖突。零延遲零延遲并不是意味著回調函數立刻執行。異步編程的中方法包括回調函數事件監聽采用事件驅動模式。 JavaScript單線程與瀏覽器多線程 Javascript是單線程的：因為JS運行在瀏覽器中，是單線程的，每個window一個JS線程。作為瀏覽器腳本語言，Ja...

shevy 2019-08-19 18:41 評論0 收藏0
日常筆記

摘要：零延遲零延遲并不是意味著回調函數立刻執行。異步編程的中方法包括回調函數事件監聽采用事件驅動模式。執行完成后，立即觸發事件，從而開始執行。所謂對象，就是代表了未來某個將要發生的事件通常是一個異步操作。 JavaScript單線程與瀏覽器多線程 Javascript是單線程的：因為JS運行在瀏覽器中，是單線程的，每個window一個JS線程。作為瀏覽器腳本語言，JavaScript的主要...

myshell 2019-08-22 10:38 評論0 收藏0
vue異步加載高德地圖

摘要：異步加載異步加載指的是為指定加載的回調函數，在的主體資源加載完畢之后，將自動調用該回調函數。幾種加載js的方式同步加載異步加載延遲加載同步加載用的最多的一種方式，又稱阻塞模式，會阻止瀏覽器的后續處理，停止后續的解析，只有當當前加載完成，才能進行下一步操作。所以默認同步執行才是安全的。但這樣如果js中有輸出document內容、修改dom、重定向等行為，就會造成頁面堵塞。...

zacklee 2019-08-22 18:08 評論0 收藏0