我們知道瀏覽器會把我們寫的HTML，CSS等代碼會渲染成頁面，現在我們探討一下
瀏覽器怎麼樣會把HTML文本渲染成頁面呢？
渲染引擎
渲染引擎包括HTML解析器，CSS解析器，佈局和JS引擎，常見的渲染引擎有如下：
HTML文本到頁面的第一步
HTMl到頁面的第一步是DOM樹，首先HTML是文本，就是字符串，但DOM樹是對象，這個過程很複雜，但我們這裏舉個例子，這裏有個表達式：
2+3-4
我麼想把這個表達式解析，我們想到的是這個樣子的.
我們的文本先是詞法解析，將文本解析成最小的單元(token),然後通過一系列規則，語法解析，然後形成樹，當然CSS，Javascript也是一樣的，先詞法解析，然後語法解析，然後形成樹。
HTML文本到頁面的第二步
首先形成了HTMl解析成DOM樹，在這個同時CSS按一些規則解析成樣式規則，然後DOM Tree和樣式規則形成Render Tree( 渲染樹),然後發生layout(重排),然後發生Painting(重繪),最終是展示在頁面上.
從Render Tree 到layout相當於就是搭房子的骨架，就是把元素放在了位置上等，元素的和模型啊，元素的大小啊等，然後就是Painting,就是裝修，就是元素的顏色啊等。
DOM Tree和Render Tree 的區別
Dom Tree類似於Render Tree,但區別很大，因爲Render Tree能夠識別樣式，Render Tree的每一個節點都有自己的樣式。
- 不可見元素 比如 header 裏的元素，比如 display:none;等元素在DOM樹存在，但在渲染樹不存在
- 絕對定位的元素 比如，設置了position:absolute等的元素不會存在與渲染樹中，會脫離一般的渲染流程。
Reflow 和 Repaint
Render樹生成後導導致Reflow和Repaint，並且一個頁面渲染完畢後，隨着用戶的操作，或者數據的變化，網頁還會進行重新渲染。
所有會觸發元素佈局發生變化的修改，都會導致重拍(reflow).比如窗口尺寸發生變化，刪除，添加 DOM元素，修改了影響元素盒子大小的CSS屬性，如width,height,padding等。
所有對元素視覺表現屬性的修改，都會導致重繪(repaint)。比如修背景顏色，文字顏色等.
