淺析我對(duì)JS延遲異步腳本的思考
關(guān)于對(duì)延遲腳本的思考
async和defer屬性的腳本，相信大家都聽(tīng)說(shuō)過(guò)，但是他的真正執(zhí)行細(xì)節(jié)是什么樣子的？很少有文章認(rèn)真研究它,可能不太有人注重細(xì)節(jié),但其實(shí)真正有技術(shù)含量的工作和項(xiàng)目,對(duì)于性能要求極高,那么細(xì)節(jié)就很重要了.需要不斷的實(shí)驗(yàn)自我嘗試
最近幾個(gè)月，我一直在研究一些技術(shù)，例如linux,操作系統(tǒng),算法等,預(yù)計(jì)要持續(xù)學(xué)習(xí)到今年年底。紅寶書(shū)第四版出來(lái)后，我也是花了很多時(shí)間去看。對(duì)于延遲腳本，自己也是做了一個(gè)實(shí)驗(yàn)，寫(xiě)下了這篇總結(jié)
什么是延遲腳本？
script標(biāo)簽，帶async和defer屬性等，通過(guò)document.createElement(’script’)創(chuàng)建并且沒(méi)有指定script.async=false的腳本默認(rèn)為異步延遲腳本（必須為非內(nèi)聯(lián)腳本）,如下所示：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title></head><body></body><script src='http://www.cgvv.com.cn/bcjs/async1.js' async></script><script src='http://www.cgvv.com.cn/bcjs/async2.js' async></script><script src='http://www.cgvv.com.cn/bcjs/defer1.js' defer></script><script src='http://www.cgvv.com.cn/bcjs/defer2.js' defer></script><script src='http://www.cgvv.com.cn/bcjs/common1.js'></script><script src='http://www.cgvv.com.cn/bcjs/common2.js'></script><script src='http://www.cgvv.com.cn/bcjs/common3.js'></script></html>
以上7個(gè)腳本文件,其中common開(kāi)頭為非異步延遲腳本,其余的都指定了延遲腳本的模式，分為async和defer兩種
通過(guò)document.createElement創(chuàng)建的標(biāo)簽插入默認(rèn)為async模式
開(kāi)始實(shí)驗(yàn)
我一共寫(xiě)了2個(gè)async和2個(gè)defer標(biāo)簽,其它的都是普通標(biāo)簽.其中async1.js里面有4000行代碼,其它都是一個(gè)console.log而已
第一次實(shí)驗(yàn)結(jié)果:
再次刷新頁(yè)面（注意我已經(jīng)禁用了瀏覽器緩存）,結(jié)果為：
再次刷新,發(fā)現(xiàn)async執(zhí)行時(shí)機(jī)和順序不確定，但是能確定defer肯定在async之后執(zhí)行。
原因在于:async是告訴瀏覽器,可以不必等到它下載解析完后再加載頁(yè)面,也不用等它執(zhí)行完后再執(zhí)行其他腳本,俗稱(chēng)異步執(zhí)行腳本
看下載執(zhí)行時(shí)機(jī)和打印結(jié)果的對(duì)比
打印結(jié)果:
對(duì)應(yīng)的下載執(zhí)行時(shí)機(jī)
從上面看，下載時(shí)機(jī)async和普通模式都是同樣并行下載,只有defer是最后才下載(http1.1有并發(fā)數(shù)量限制,可是這里并不是并發(fā)限制，當(dāng)我刪除common的引用后,我發(fā)現(xiàn)defer永遠(yuǎn)都是最后下載的)
async和defer兩種模式，區(qū)別在于:
async是告訴瀏覽器,它不會(huì)操作dom,可以不必等到它下載解析完后再加載頁(yè)面,也不用等它執(zhí)行完后再執(zhí)行其他腳本,俗稱(chēng)異步執(zhí)行腳本, 多個(gè)async無(wú)法保證他們的執(zhí)行順序,例如async1和async2無(wú)法按順序執(zhí)行 defer是在解析到結(jié)束到</html>標(biāo)簽后才會(huì)執(zhí)行,俗稱(chēng)推遲執(zhí)行腳本,多個(gè)defer可以按順序執(zhí)行,例如defer1和defer2可以按順序執(zhí)行(實(shí)際上也不保證順序執(zhí)行) 解析到script標(biāo)簽后,async是直接下載 解析到script標(biāo)簽后,defer是最后下載相同點(diǎn):
多個(gè)async或者defer標(biāo)簽實(shí)際上都不能保證順序執(zhí)行 都不會(huì)阻塞解析其他script標(biāo)簽內(nèi)容的解析和頁(yè)面渲染 他們都會(huì)在瀏覽器load事件前執(zhí)行，但是不保證是在DomContentLoad事件前還是后執(zhí)行影響多個(gè)異步腳本的執(zhí)行順序因素
腳本文件大小 網(wǎng)絡(luò)傳輸因素特殊情況
當(dāng)所有的腳本文件都很小很小的時(shí)候,結(jié)果會(huì)在很大概率穩(wěn)定在
使用的注意點(diǎn)
異步推遲腳本的執(zhí)行順序并不穩(wěn)定,所有盡量只有一個(gè) 使用異步推遲腳本時(shí),應(yīng)該考慮什么場(chǎng)景才使用,而不是濫用它寫(xiě)在最后
到此這篇關(guān)于淺析我對(duì)JS延遲異步腳本的思考的文章就介紹到這了,更多相關(guān)JS 延遲異步腳本內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
1. vue實(shí)現(xiàn)移動(dòng)端返回頂部2. asp讀取xml文件和記數(shù)3. vue 驗(yàn)證兩次輸入的密碼是否一致的方法示例4. xml中的空格之完全解說(shuō)5. 多個(gè)SpringBoot項(xiàng)目采用redis實(shí)現(xiàn)Session共享功能6. python基于scrapy爬取京東筆記本電腦數(shù)據(jù)并進(jìn)行簡(jiǎn)單處理和分析7. python利用opencv實(shí)現(xiàn)顏色檢測(cè)8. CSS自定義滾動(dòng)條樣式案例詳解9. Python如何實(shí)現(xiàn)感知器的邏輯電路10. PHP實(shí)現(xiàn)基本留言板功能原理與步驟詳解
網(wǎng)公網(wǎng)安備