哪些地方會出現css阻塞，哪些地方會出現js阻塞？
阿新 • • 發佈：2019-01-05
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 來呼叫
Javascript無阻塞載入具體方式：
1. 將指令碼放在底部。還是放在head中，用以保證在js載入前，能加載出正常顯示的頁面。
此技術的重點在於：無論在何處啟動下載，檔案額下載和執行都不會阻塞其他頁面處理過程，即使在head裡（除了用於下載檔案的 http 連結）。
由於瀏覽器為了防止出現 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 來呼叫
Javascript無阻塞載入具體方式：
1. 將指令碼放在底部。還是放在head中，用以保證在js載入前，能加載出正常顯示的頁面。
-
<script>
-
var script=document.createElement("script");
-
script.type="text/javascript";
-
script.src="file.js";
-
document.getElementsByTagName("head")[0].appendChild(script);
- </script>
此技術的重點在於：無論在何處啟動下載，檔案額下載和執行都不會阻塞其他頁面處理過程，即使在head裡（除了用於下載檔案的 http 連結）。