js 的阻塞特性：所有瀏覽器在下載 JS 的時候，會阻止一切其他活動，比如其他資源的下載，內(nèi)容的呈現(xiàn)等等。直到 JS 下載、解析、執(zhí)行完畢后才開始繼續(xù)并行下載其他資源并呈現(xiàn)內(nèi)容。為了提高用戶體驗，新一代瀏覽器都支持并行下載 JS，但是 JS 下載仍然會阻塞其它資源的下載（例如.圖片，css文件等）。
由于瀏覽器為了防止出現(xiàn) JS 修改 DOM 樹，需要重新構(gòu)建 DOM 樹的情況，所以就會阻塞其他的下載和呈現(xiàn)。
嵌入 JS 會阻塞所有內(nèi)容的呈現(xiàn)，而外部 JS 只會阻塞其后內(nèi)容的顯示，2 種方式都會阻塞其后資源的下載。也就是說外部樣式不會阻塞外部腳本的加載，但會阻塞外部腳本的執(zhí)行。
CSS 怎么會阻塞加載了？CSS 本來是可以并行下載的，在什么情況下會出現(xiàn)阻塞加載了(在測試觀察中，IE6 下 CSS 都是阻塞加載）
當 CSS 后面跟著嵌入的 JS 的時候，該 CSS 就會出現(xiàn)阻塞后面資源下載的情況。而當把嵌入 JS 放到 CSS 前面，就不會出現(xiàn)阻塞的情況了。
根本原因：因為瀏覽器會維持 html 中 css 和 js 的順序，樣式表必須在嵌入的 JS 執(zhí)行前先加載、解析完。而嵌入的 JS 會阻塞后面的資源加載，所以就會出現(xiàn)上面 CSS 阻塞下載的情況。
嵌入JS應該放在什么位置？
- 放在底部，雖然放在底部照樣會阻塞所有呈現(xiàn)，但不會阻塞資源下載。
- 如果嵌入
JS放在head中，請把嵌入JS放在CSS頭部。 - 使用
defer（只支持IE） - 不要在嵌入的
JS中調(diào)用運行時間較長的函數(shù)，如果一定要用，可以用setTimeout來調(diào)用
Javascript無阻塞加載具體方式：
- 將腳本放在底部。<
link>還是放在head中，用以保證在js加載前，能加載出正常顯示的頁面。<script>標簽放在</body>前。 - 阻塞腳本：由于每個<
script>標簽下載時阻塞頁面解析過程，所以限制頁面的<script>總數(shù)也可以改善性能。適用于內(nèi)聯(lián)腳本和外部腳本。 - 非阻塞腳本：等頁面完成加載后，再加載
js代碼。也就是，在window.onload事件發(fā)出后開始下載代碼。 -
defer屬性：支持IE4和fierfox3.5更高版本瀏覽器 - 動態(tài)腳本元素：文檔對象模型（
DOM）允許你使用js動態(tài)創(chuàng)建HTML的幾乎全部文檔內(nèi)容。代碼如下：
<script>
var script=document.createElement("script");
script.type="text/javascript";
script.src="file.js";
document.getElementsByTagName("head")[0].appendChild(script);
</script>
此技術(shù)的重點在于：無論在何處啟動下載，文件額下載和運行都不會阻塞其他頁面處理過程，即使在head里（除了用于下載文件的 http 鏈接）。
推薦：
- 持續(xù)更新，致力于做一個持久的搬運工！
- 下面是已經(jīng)整理好的面試題PDF獲取和相關(guān)進階學習書籍資料地址，有需求戳一下
- 2020前端面試題總結(jié)合集
