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