瀏覽器如何解析程式碼渲染頁面
最近看到有的朋友在糾結我們程式碼和瀏覽器到底具體發生了什麼。
我們從開啟瀏覽器一步一步開始。
- 開啟瀏覽器
- 輸入網址並搜尋
- 瀏覽器解析網址併發送到DNS伺服器
- 伺服器收到資訊後將相應的HTML,CSS,JS檔案等外部資源傳送給瀏覽器
- 瀏覽器解析將HTML程式碼稱為DOM樹結構
- 將CSS程式碼解析成CSSOM結構（CSS Object Model）
- 結合DOM和CSSOM構建渲染樹
- 生成佈局，即將所有渲染樹的頁面進行合成
- 將佈局繪到螢幕
從第5-9步是真正的渲染過程，從5-7這三步非常快。
"生成佈局"（flow）和"繪製"（paint）這兩步，合稱為"渲染"（render）
現在簡單講一下瀏覽器的渲染過程
首先，建立DOM樹：
D： document（文件），沒有文件，DOM也就無從談起，當建立網頁就把編寫的頁面文件轉換辰為一個文件物件。
O：物件。物件分為使用者自定義物件、內建物件、宿主物件。
M：model（模型），DOM把文件表現成一顆樹。其本身就是這個M模型。
例如有這麼一段程式碼：
<html>
<head>
<title>Beautiful page</title>
</head>
<body>
<p>
Once upon a time there was
a looong paragraph...
</p>
<div style="display: none">
Secret message
</div>
<div><img src="..." /></div>
...
</body>
</html>
那麼DOM樹是完全和HTML標籤一一對應的，如下所示：
documentElement (html)
head
title
body
p
[text node]
div
[text node]
div
img
由此可知我們知道DOM樹由一個個節點組成。其中有:元素節點、文字節點、屬性節點。當構建完DOM樹後，就會開始構建渲染樹。
而渲染樹就不同了，她只有哪些需要繪製出來的元素，所以head 以及被隱藏的div都不會出現在渲染樹中。
root (RenderView)
body
p
line 1
line 2
line 3
...
div
img
...
重繪和重排
當頁面剛初始化的時候頁面就會開始一次重排操作。任何一次對渲染樹的修改都會可能導致下面兩個操作。
1，重排
就是渲染樹的一部分必須要更新 並且節點的尺寸發生了變化。這就會觸發重排操作。重排必定會導致重繪。
- 修改DOM
- 修改樣式表
- 使用者事件（比如滑鼠懸停、頁面滾動、輸入框鍵入文字、改變視窗大小等等）
2，重繪
部分節點需要更新，但是沒有改變他的集合形狀，比如改變了背景顏色，這就會觸發重繪。
更多請見：阮一峰大神的http://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html