瀏覽器解析渲染的過程

瀏覽器加載解析過程

在面試的時候，有的面試官會問到js加載是不是會阻塞DOM樹的解析和渲染，css會不會，或者問到相關問題，就想總結一下，首先有幾個問題，自己在查詢資料的時候，答案衆說紛紜，通過自己學習，總結如下，也歡迎糾正
1.css會不會阻塞DOM樹的解析和渲染?
css是不會阻塞DOM樹的解析；因爲當瀏覽器解析到link的href去加載外部css文件的時候，瀏覽器還是會繼續加載dom結構，爲了效率，它會把該完成的都解析完，生成相應的dom樹，但是會阻塞dom的渲染，它要等外部的css文件加載解析完，纔會解析style標籤裏的樣式，這時候纔是根據樣式的順序也好，權重也好去渲染dom。

//小demo:
//demo.css文件：
.demo {
    background-color: yellow !important;   //1
}
//.html文件
<link ref="stylesheet" href="./demo.css">
//style:
    .demo {
        width: 200px;
        height: 200px;
        background-color: red !important;   //2
    }
//body:
    <div class="demo" style="background-color: blue">你好</div>  //3
    顯示的你好是什麼顏色? 

2.js會不會阻塞DOM樹的解析和渲染?
js的加載會阻塞DOM樹的解析和渲染，還有後面一些資源的下載，js的加載和執行有以下特點：
1>載入js後瀏覽器會立即執行
2>執行時會阻塞後面內容的構建，渲染及以下資源的下載，因爲瀏覽器需要一個穩定的DOM樹結構，而JS中很有可能有代碼直接改變了DOM樹結構，比如使用 document.write 或 appendChild,甚至是直接使用的location.href進行跳轉，瀏覽器爲了防止出現JS修 改DOM樹，需要重新構建DOM樹的情況，所以 就會阻塞其他的下載和呈現。

//運行個demo，自己可以測試一下：
//把腳本放在頭部和放在底部，在js裏面去獲取dom元素，看看能不能獲取到，或者寫個死循環，讓腳本一直運行，看dom能顯示出來不 
<script>
        while(true){
            console.log(1);
        }
</script>