前端工程師-高級(jí)web網(wǎng)站前端開(kāi)發(fā)加載javascript指南-資料下載頁(yè)
2025-06-17 00:42本頁(yè)面
【正文】 只加了1個(gè)空的嵌入JS)：1. head 2. titlejstestspanstyle=color:800000。title 3. metaequiv=ContentTypecontent=text/html。charset=UTF8/ 4. linktype=text/cssrel=stylesheethref=/ 5. scripttype=text/javascript 6. functiona(){} 7. spanstyle=color:800000。script 8. spanstyle=color:800000。head 9. body 10. imgsrc=//spanbr/ 11. imgsrc=/ 12. spanstyle=color:800000。body時(shí)間瀑布圖:從時(shí)間瀑布圖中可以看出，代碼2中，CSS和圖片并沒(méi)有并行下載，而是等待CSS下載完畢后才去并行下載后面的2個(gè)圖片，當(dāng)CSS后面跟著嵌入的JS的時(shí)候，該CSS就會(huì)出現(xiàn)阻塞后面資源下載的情況。有人可能會(huì)問(wèn)，這里為什么不說(shuō)說(shuō)嵌入的JS阻塞了后面的資源，而是說(shuō)CSS阻塞了? 想想我們現(xiàn)在用的是1個(gè)空函數(shù)，解析這個(gè)空函數(shù)1ms就夠。大家還可以試試把嵌入JS放到CSS前面，就不會(huì)出現(xiàn)阻塞的情況了。根本原因：因?yàn)闉g覽器會(huì)維持html中css和js的順序，樣式表必須在嵌入的JS執(zhí)行前先加載、解析完。而嵌入的JS會(huì)阻塞后面的資源加載，所以就會(huì)出現(xiàn)上面CSS阻塞下載的情況。嵌入JS應(yīng)該放在什么位置放在底部，雖然放在底部照樣會(huì)阻塞所有呈現(xiàn)，但不會(huì)阻塞資源下載。如果嵌入JS放在head中，請(qǐng)把嵌入JS放在CSS頭部。使用defer不要在嵌入的JS中調(diào)用運(yùn)行時(shí)間較長(zhǎng)的函數(shù)，如果一定要用，可以用setTimeout來(lái)調(diào)用PS：很多網(wǎng)站喜歡在head中嵌入JS，并且習(xí)慣放在CSS后面，當(dāng)然也有很多網(wǎng)站是把JS放到CSS前面的，比如yahoo,google4 / 4
環(huán)評(píng)公示相關(guān)推薦
鄂ICP備17016276號(hào)-1