新聞中心
這篇文章主要講解了“什么是JS延遲異步腳本”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“什么是JS延遲異步腳本”吧!
創(chuàng)新互聯(lián)主營安化網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,手機(jī)APP定制開發(fā),安化h5微信小程序搭建,安化網(wǎng)站營銷推廣歡迎安化等地區(qū)企業(yè)咨詢
什么是延遲腳本?
script
標(biāo)簽,帶async
和defer
屬性等,通過document.createElement('script')
創(chuàng)建并且沒有指定script.async=false
的腳本默認(rèn)為異步延遲
腳本(必須為非內(nèi)聯(lián)腳本),如下所示:
Document
以上7個腳本文件,其中
common
開頭為非異步延遲腳本,其余的都指定了延遲腳本的模式,分為async
和defer
兩種
通過document.createElement創(chuàng)建的標(biāo)簽插入默認(rèn)為async
模式
開始實(shí)驗(yàn)
我一共寫了2個
async
和2個defer
標(biāo)簽,其它的都是普通標(biāo)簽.其中async1.js
里面有4000行代碼,其它都是一個console.log
而已第一次實(shí)驗(yàn)結(jié)果:
再次刷新頁面(注意我已經(jīng)禁用了瀏覽器緩存),結(jié)果為:
再次刷新,發(fā)現(xiàn)
async
執(zhí)行時機(jī)和順序不確定
原因在于:async
是告訴瀏覽器,可以不必等到它下載解析完后再加載頁面,也不用等它執(zhí)行完后再執(zhí)行其他腳本,俗稱異步執(zhí)行腳本
看下載執(zhí)行時機(jī)和打印結(jié)果的對比
打印結(jié)果:
對應(yīng)的下載執(zhí)行時機(jī)
從上面看,下載時機(jī)
async
和普通模式都是同樣并行下載,只有defer是最后才下載(http1.1有并發(fā)數(shù)量限制
,可是這里并不是并發(fā)限制,當(dāng)我刪除common
的引用后,我發(fā)現(xiàn)defer
永遠(yuǎn)都是最后下載的)async
和defer
兩種模式,區(qū)別在于:async
是告訴瀏覽器,它不會操作dom
,可以不必等到它下載解析完后再加載頁面,也不用等它執(zhí)行完后再執(zhí)行其他腳本,俗稱異步執(zhí)行腳本
, 多個async
無法保證他們的執(zhí)行順序,例如async1
和async2
無法按順序執(zhí)行defer
是在解析到結(jié)束到