css阻塞與js阻塞
阿新 • • 發佈:2018-12-27
js的阻塞特性:所有瀏覽器在下載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`來呼叫