瀏覽器的渲染機制以及JS運行機制

渲染機制

DOCTYPE的做用

• DTD（文檔定義類型）是一系列的語法規則，用來定義XML或者(X)HTML的文件類型。瀏覽器會使用它來判斷文檔類型，決定用何種協議來解析，以及切換瀏覽器模式
• DOCTYPE是用來聲明文檔類型和DTD規範的，一個主要的用途是文件的合法性驗證。若是文件代碼不合法，那麼解析的時候會出一些差錯。

DOCTYPE類型

• HTML5
• HTML 4.01 Strict 嚴格模式 該DTD包含全部HTML元素和屬性，但不包括展現性和棄用的元素
• HTML 4.01 Transitional 傳統模式 該DTD包含全部HTML元素和屬性， 包括展現性和棄用的元素 （好比font）

瀏覽器渲染過程

因此瀏覽器的渲染過程主要包括如下幾步：

• 解析HTML生成DOM樹。
• 解析CSS生成CSSOM規則樹。
• 將DOM樹與CSSOM規則樹合併在一塊兒生成渲染樹。
• 遍歷渲染樹開始佈局，計算每一個節點的位置大小信息。
• 將渲染樹每一個節點繪製到屏幕。

渲染阻塞

當瀏覽器遇到一個 script 標記時，DOM 構建將暫停，直至腳本完成執行，而後繼續構建DOM。每次去執行JavaScript腳本都會嚴重地阻塞DOM樹的構建，若是JavaScript腳本還操做了CSSOM，而正好這個CSSOM尚未下載和構建，瀏覽器甚至會延遲腳本執行和構建DOM，直至完成其CSSOM的下載和構建。

因此，script 標籤的位置很重要。實際使用時，能夠遵循下面兩個原則：

• CSS 優先：引入順序上，CSS 資源先於 JavaScript 資源。
• JS置後：咱們一般把JS代碼放到頁面底部，且JavaScript 應儘可能少影響 DOM 的構建。

重排reflow

定義

DOM結構中的每一個元素都有本身的盒模型，這些都須要瀏覽器根據各類樣式來計算並根據結果將元素放到它該出現的位置，這個過程叫作reflow

觸發reflow

• 當增長、刪除、修改DOM節點的時候，會致使reflow或者repaint
• 當你移動DOM節點，或者搞動畫的時候
• 當你修改CSS樣式的時候
• 當你resize窗口的時候（移動端沒有這個問題），或者滾動的時候
• 當你修改網頁默認字體的時候（這個會出現各類問題）
• 如何觸發reflow應該至少要記住以上兩點以上

重繪repaint

定義

當各類盒子的位置、大小以及其餘屬性改動，例如字體大小顏色等都肯定下來之後，瀏覽器就把這個元素按照各自的特性繪製了一遍，因而頁面內容就出現了，這個過程叫作repaint

觸發repaint

• DOM改動
• CSS改動

如何儘量少的進行重繪

將DOM改動或者CSS改動儘量的一次性改完，不要一次操做分屢次進行 例子：

//屢次重繪
dom1.style.backgroundColor = 'red'
dom1.style.width= '50px'
dom1.style.height= '50px'
//一次重繪
//CSS
.add{
  backgound-color: red;
  width: 50px;
  heiht: 50px;
}
//JS
dom2.className = 'add'
複製代碼

JS運行機制

JS是單線程的，不能夠同時執行多個任務，可是同時也有異步操做。JS會優先執行同步操做，而後同步操做都完成之後再去執行異步操做。

console.log(1)
setTimeout(function() {
  console.log(3)
}, 0)
console.log(2)
//輸出順序爲 1 2 3 由於setTimeout是一個異步函數
複製代碼

console.log(1)
setTimeout(function() {
  console.log(2)
}, 0)
while (true) {
  
}
//只輸出1而後進入無線循環不輸出2
複製代碼

驗證了全部同步操做完成以前異步操做是不會被執行的。

Event Loop

for(var i = 0;i < 4;i++) {
  setTimeout(function() {
    console.log(i)
  },1000)
} 
//輸出四個4
複製代碼

上面這段代碼同時輸出4個4.由於在循環的過程當中遇到setTimeout會記住這個函數，可是不會去執行他，而後進入下一輪循環，等到循環結束，setTimeout被放入異步隊列執行。

異步任務

• setTimeout 和 setInterval
• DOM事件
• ES6中的promise

總結

• 瞭解JS的單線程的概念
• 理解任務隊列
• 理解Event Loop
• 理解哪些語句會放入異步任務隊列
• 理解語句放入異步隊列的時機