成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JavaScript文件的同步和異步加載

williamwen1986 / 628人閱讀

摘要：本文簡述一些文件的同步和異步加載方式。當(dāng)然缺點是，不能保證有依賴關(guān)系的文件的加載順序?？偨Y(jié)如果是單一或少數(shù)文件，可以在的最后插入標(biāo)簽，以同步方式加載。如果是多個文件，建議異步加載，以避免阻塞界面渲染，也縮短整體加載時間。

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

同步加載

可在html文件里以

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

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

通過Script Element異步加載

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

html 代碼


    
    Title

在Chrome里的調(diào)試結(jié)果有時候能正確的輸出如下：

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

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


    
    Title

這樣就能永遠(yuǎn)輸出正確結(jié)果了。

通過 AJAX 加載JS文件

也能正確的輸出結(jié)果。

總結(jié)

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/87354.html

相關(guān)文章

  • JavaScript模塊化編程探索

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

    jayzou 評論0 收藏0

  • JavaScript單線程、加載與模塊化

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

    shevy 評論0 收藏0

  • 日常筆記

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

    myshell 評論0 收藏0

  • vue異步加載高德地圖

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

    zacklee 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<