哪些地方會出現css阻塞,哪些地方會出現js阻塞?
阿新 • • 發佈:2017-11-23
腳本 順序 開始 式表 其他 運行時 樣式表 方式 調用
j
s的阻塞特性:
所有瀏覽器在下載JS的時候,會阻止一切其他活動,比如其他資源的下載,內容的呈現等等。
直到JS下載、解析、執行完畢後才開始繼續並行下載其他資源並呈現內容。
為了提高用戶體驗,新一代瀏覽器都支持並行下載JS,但是JS下載仍然會阻塞其它資源的下載(例如.圖片,css文件等)。
*由於瀏覽器為了防止出現JS修改DOM樹,需要重新構建DOM樹的情況,所以就會阻塞其他的下載和呈現。
*嵌入JS會阻塞所有內容的呈現,而外部JS只會阻塞其後內容的顯示,2種方式都會阻塞其後資源的下載。
也就是說外部樣式不會阻塞外部腳本的加載,但會阻塞外部腳本的執行。
CSS怎麽會阻塞加載了?
CSS本來是可以並行下載的,在什麽情況下會出現阻塞加載了(在測試觀察中,IE6下CSS都是阻塞加載)
*當CSS後面跟著嵌入的JS的時候,該CSS就會出現阻塞後面資源下載的情況;
*而當把嵌入JS放到CSS前面,就不會出現阻塞的情況了。
根本原因:
*因為瀏覽器會維持html中css和js的順序,樣式表必須在嵌入的JS執行前先加載、解析完。
*而嵌入的JS會阻塞後面的資源加載,所以就會出現上面CSS阻塞下載的情況。
嵌入JS應該放在什麽位置?
1、放在底部,雖然放在底部照樣會阻塞所有呈現,但不會阻塞資源下載。
2、如果嵌入JS放在head中,請把嵌入JS放在CSS頭部。
3、使用defer(只支持IE)
4、不要在嵌入的JS中調用運行時間較長的函數,如果一定要用,可以用`setTimeout`來調用
哪些地方會出現css阻塞,哪些地方會出現js阻塞?