日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
我對(duì)JS延遲異步腳本的思考

關(guān)于對(duì)延遲腳本的思考

  • async和defer屬性的腳本，相信大家都聽說過，但是他的真正執(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í)間去看。對(duì)于延遲腳本，自己也是做了一個(gè)實(shí)驗(yàn)，寫下了這篇總結(jié)

什么是延遲腳本？

  • script標(biāo)簽，帶async和defer屬性等，通過document.createElement('script')創(chuàng)建并且沒有指定script.async=false的腳本默認(rèn)為異步延遲腳本（必須為非內(nèi)聯(lián)腳本）,如下所示： 
 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5.      
    6.   
  
  
  
  6.      
    7.   
  
  
  
  7.     Document 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9.  
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11.  
    12.   
  
  
  
  12.  
    13.   
  
  
  
  13.  
    14.   
  
  
  
  14.  
    15.   
  
  
  
  15.  
    16.   
  
  
  
  16.  
    17.   
  
  
  
  17.  
    18.   
  
  
  
  18.  
    19.   
  
  
  
  19.  
    20.   
  
  
  
  20.  
    21.   
  
  
  
  21.  
    22.
  • 以上7個(gè)腳本文件,其中common開頭為非異步延遲腳本,其余的都指定了延遲腳本的模式，分為async和defer兩種

通過document.createElement創(chuàng)建的標(biāo)簽插入默認(rèn)為
async模式

創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比巧家網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式巧家網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋巧家地區(qū)。費(fèi)用合理售后完善，十年實(shí)體公司更值得信賴。

開始實(shí)驗(yàn)

  • 我一共寫了2個(gè)async和2個(gè)defer標(biāo)簽,其它的都是普通標(biāo)簽.其中async1.js里面有4000行代碼,其它都是一個(gè)console.log而已
  • 第一次實(shí)驗(yàn)結(jié)果:

  • 再次刷新頁面（注意我已經(jīng)禁用了瀏覽器緩存）,結(jié)果為：

  • 再次刷新,發(fā)現(xiàn)async執(zhí)行時(shí)機(jī)和順序不確定

原因在于:
async是告訴瀏覽器,可以不必等到它下載解析完后再加載頁面,也不用等它執(zhí)行完后再執(zhí)行其他腳本,俗稱
異步執(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,可以不必等到它下載解析完后再加載頁面,也不用等它執(zhí)行完后再執(zhí)行其他腳本,俗稱異步執(zhí)行腳本, 多個(gè)async無法保證他們的執(zhí)行順序,例如async1和async2無法按順序執(zhí)行
    • defer是在解析到結(jié)束到標(biāo)簽后才會(huì)執(zhí)行,俗稱推遲執(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)容的解析和頁面渲染
    • 他們都會(huì)在瀏覽器load事件前執(zhí)行，但是不保證是在DomContentLoad事件前還是后執(zhí)行
    • defer不一定在async后面執(zhí)行，從我的實(shí)驗(yàn)結(jié)果和書上對(duì)它們對(duì)解析來看

影響多個(gè)異步腳本的執(zhí)行順序因素

  • 腳本文件大小
  • 網(wǎng)絡(luò)傳輸因素

特殊情況

  • 當(dāng)所有的腳本文件都很小很小的時(shí)候,結(jié)果會(huì)在很大概率穩(wěn)定在

使用的注意點(diǎn)

  • 異步推遲腳本的執(zhí)行順序并不穩(wěn)定,所有盡量只有一個(gè)
  • 使用異步推遲腳本時(shí),應(yīng)該考慮什么場景才使用,而不是濫用它

文章標(biāo)題：我對(duì)JS延遲異步腳本的思考
URL鏈接：http://www.dlmjj.cn/article/djchjhi.html