1. 程式人生 > >哪些地方會出現css阻塞,哪些地方會出現js阻塞?

哪些地方會出現css阻塞,哪些地方會出現js阻塞?

腳本 順序 開始 式表 其他 運行時 樣式表 方式 調用

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`來調用

哪些地方會出現css阻塞,哪些地方會出現js阻塞?