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

資訊專欄INFORMATION COLUMN

淺談script標簽的defer和async

Developer / 1308人閱讀

摘要:也就是說是亂序的,而是順序執(zhí)行,這也就決定了比較適用于百度分析或者谷歌分析這類不依賴其他腳本的庫。然而,這張圖幾乎是百度搜到的唯一答案是不嚴謹?shù)?,這只是規(guī)范的情況,大多數(shù)瀏覽器在實現(xiàn)的時候會作出優(yōu)化。

1. 什么鬼

今天在做一個小需的時候,忽然看到前輩一句吊炸天的代碼

    

臥槽,竟然同時有asyncdefer屬性,心想著肯定是前輩老司機的什么黑科技,兩個一塊兒肯定會發(fā)生什么神奇化學反應,于是趕緊懷著一顆崇敬的心去翻書翻文檔,先復習一下各自的定義。

2. 調查一番

先看看asyncdefer各自的定義吧,翻開紅寶書望遠鏡,是這么介紹的

2.1 defer

這個屬性的用途是表明腳本在執(zhí)行時不會影響頁面的構造。也就是說,腳本會被延遲到整個頁面都解析完畢后再運行。因此,在藍色線代表網絡讀取,紅色線代表執(zhí)行時間,這倆都是針對腳本的;綠色線代表 HTML 解析。

也就是說async是亂序的,而defer是順序執(zhí)行,這也就決定了async比較適用于百度分析或者谷歌分析這類不依賴其他腳本的庫。從圖中可以看到一個普通的 ul>li{這是第$個節(jié)點}*1000

一個簡單的demo,從各個CDN上引用了2個CSS3個JS,在body里面創(chuàng)建了1000個li。通過調整外部引用資源的位置和加入相關的屬性利用chrome的Timeline進行驗證。

3.2 放置在


異步加載資源,但會阻塞的渲染會出現(xiàn)白屏,按照順序立即執(zhí)行腳本

3.3 放置在底部


異步加載資源,等中的內容渲染完畢后且加載完按順序執(zhí)行JS

3.3 放置在頭部并使用async


異步加載資源,且加載完JS資源立即執(zhí)行,并不會按順序,誰快誰先上

3.4 放置在頭部并使用defer


異步加載資源,在DOM渲染后之后再按順序執(zhí)行JS

3.5 放置在頭部并同時使用asyncdefer


表現(xiàn)和async一致,開了個腦洞,把這兩個屬性交換一下位置,看會不會有覆蓋效果,結果發(fā)現(xiàn)是一致的 = =、

綜上,在webkit引擎下,建議的方式仍然是把

閱讀需要支付1元查看
<