一 ： 為什么要了解瀏覽器渲染頁面的機制，主要還是性能的優化。
- 了解瀏覽器如何進行加載，我們可以在引用外部樣式文件，外部JS時，將它們放到合適的位置，是瀏覽器以最快的速度，將文件加載完畢。
- 了解瀏覽器如何進行解析，我們可以在構建DOM結構，組織CSS選擇器的時候，選擇最優的寫法，提高瀏覽器的解析速率。
- 了解瀏覽器如何進行渲染，明白渲染的過程，我們在設置元素屬性，編寫JS文件時，可以減少“重繪”，“重新布局”的消耗。
二 ： 要了解清楚渲染機制，要先弄明白幾個基本概念：
- DOM：Document Object Model，瀏覽器將HTML解析成樹形的數據結構，簡稱DOM。
- CSSOM：CSS Object Model，瀏覽器將CSS解析成樹形的數據結構，簡稱CSSOM。
-
Render Tree: DOM和CSSOM合并后生成Render Tree，如下圖：
image.png - Layout: 計算出Render Tree每個節點的具體位置。
- Painting：通過顯卡，將Layout后的節點內容分別呈現到屏幕上。
三 ： 需要注意的是：
- 當我們瀏覽器獲得HTML文件后，會自上而下的加載，并在加載過程中進行解析和渲染。
- 加載說的就是獲取資源文件的過程，如果在加載過程中遇到外部CSS文件和圖片，瀏覽器會另外發送一個請求，去獲取CSS文件和相應的圖片，這個請求是異步的，并不會影響HTML文件的加載。
- 但是如果遇到Javascript文件，HTML文件會掛起渲染的進程，等待JavaScript文件加載完畢后，再繼續進行渲染。
為什么HTML需要等待JavaScript呢？因為JavaScript可能會修改DOM，導致后續HTML資源白白加載，所以HTML必須等待JavaScript文件加載完畢后，再繼續渲染，這也就是為什么JavaScript文件在寫在底部body標簽前的原因。
四 ： 瀏覽器渲染的整個流程
瀏覽器整個流程如上圖所示：
- 當用戶輸入一個URL時，瀏覽器就會向服務器發出一個請求，請求URL對應的資源
- 接受到服務器的響應內容后，瀏覽器的HTML解析器，會將HTML文件解析成一棵DOM樹，DOM樹的構建是一個深度遍歷的過程，當前節點的所有子節點都構建完成以后，才會去構建當前節點的下一個兄弟節點。
- 將CSS解析成CSSOM樹（CSS Rule Tree）
- 根據DOM樹和CSSOM樹，來構建Render Tree（渲染樹）,注意渲染樹，并不等于DOM樹，因為一些像head或display:none的東西，就沒有必要放在渲染樹中了。
- 有了Render Tree，瀏覽器已經能知道網頁中有哪些節點，各個節點的CSS定義，以及它們的從屬關系，下一步操作就是Layout,顧名思義，就是計算出每個節點在屏幕中的位置。
- Layout后，瀏覽器已經知道哪些節點要顯示，每個節點的CSS屬性是什么，每個節點在屏幕中的位置是哪里，就進入了最后一步painting,按照算出來的規則，通過顯卡，把內容畫到屏幕上。
這里還要說兩個概念，一個是Reflow，另一個是Repaint。這兩個不是一回事。
- Repaint ——改變某個元素的背景色、文字顏色、邊框顏色等等不影響它周圍或內部布局的屬性時，屏幕的一部分要重畫，但是元素的幾何尺寸沒有變。
- Reflow ——元件的幾何尺寸變了，我們需要重新驗證并計算Render Tree。是Render Tree的一部分或全部發生了變化。
- reflow 幾乎是無法避免的。現在界面上流行的一些效果，比如樹狀目錄的折疊、展開（實質上是元素的顯 示與隱藏）等，都將引起瀏覽器的 reflow。鼠標滑過、點擊……只要這些行為引起了頁面上某些元素的占位面積、定位方式、邊距等屬性的變化，都會引起它內部、周圍甚至整個頁面的重新渲 染。通常我們都無法預估瀏覽器到底會 reflow 哪一部分的代碼，它們都彼此相互影響著。
注：display:none會觸發reflow，而visibility:hidden只會觸發repaint，因為沒有發現位置變化。
五 : DOM和CSSOM的具體構建流程：
DOM 和 CSSOM 都是以" Bytes → characters → tokens → nodes → object model. " 這樣的方式生成最終的數據。如下圖所示：
具體到DOM樹的構建，如下圖：
1、 當服務器返回一個HTML文件給瀏覽器的時候，瀏覽器接受到的是一些字節數據。
2、 然后瀏覽器根據HTTP響應中的編碼方式（通過是UTF8），解析字節數據，得到一些字符。如果這個時候編碼方式跟文件的字節編碼不一致，便會出現亂碼。所以我們通過使用<meta http-equiv="content-type"content="text/html;charset=utf-8">來告訴瀏覽器我們頁面使用的是什么編碼。
3、 這個時候，瀏覽器再根據DTD中的對元素（標簽）的定義，對這些接受到的字符進行語義化(token)。我們經常在html文件的第一行，定義<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">，這個DTD就是告訴瀏覽器，那些字符是有意義的，那些字符是無意義的。DTD常見的有嚴格、過渡、框架和HTML5三種。不同的DTD中，有不同的元素定義。比如過渡的DTD中就比嚴格的DTD中多出了<center>、<font>等等一些元素的定義，也就是說使用嚴格的DTD，即使你在你的HTML文件中使用了<center>，瀏覽器也會忽略掉的。所以也就有了一些人使用不同的DTD或者不使用DTD的時候，布局會明顯不同的原因了。
4、 接著，瀏覽器再使用這些語義塊(token)創建對象，形成一個個節點了。
5、 然后HTML解析器就會從HTML文件的頭部到尾部，一個個地遍歷這些節點。當這些節點是普通節點的話，HTML解析器就會將這些節點加入到DOM樹中。當這些節點是JS代碼的話，HTML解析器就會將控制權交給JS解析器。如果這些節點是CSS代碼的話，HTML解析器就會將控制權交給CSS解析器。不過，當外聯的JS代碼和CSS代碼還沒從服務器傳到瀏覽器的時候，這個時候如果DOM樹上有可視元素的話，瀏覽器通常會選擇在這個時候，將一些內容提前渲染到屏幕上來。
6、 當HTML解析器讀到最后一個節點的時候，整個DOM樹也構建完成了，這個時候就會觸發domContentloaded事件。而很多JS庫（像JQ）通常會在這個時候有所反應的。
至此，DOM樹就全部構建完成了。
