浏覽器解析文檔資源并渲染

浏覽器是這麼解析文檔資源并渲染頁面的流程是咋樣？

1.浏覽器通過HTMLParser（HTML解析器）根據深度周遊的原則把HTML解析成DOM Tree（dom樹） || 将HTML解析出DOM Tree

2.浏覽器通過CSS Parser（CSS解析器）将CSS解析成CSS Rule Tree（CSSOM Tree --- css規則樹） || 将CSS解析出CSS Tree

3.浏覽器将JavaScript通過DOM API或者CSSOM API 将JS代碼解析并應用到布局中，按要求呈現響應的結果。|| js引擎專門處理js腳本的虛拟機，解析js代碼 并把 操作 DOM Api、CSSOM Api的解析到布局中，進而按程式要的要求呈現相應的結果

4.根據DOM Tree（dom樹）和CSSOM Tree（cssom 樹）來構造render Tree || 生成渲染樹

5.layout || reflow: 重排（别名回流），當render tree 中任意一節點的幾何尺寸發送變化，render tree就會重新布局，重新來計算所有節點在螢幕的位置 || 渲染中的一種行為。當rendertree中任一節點的幾何尺寸發生改變了，render tree都會重新布局。

6.repaint（重繪）:當render tree 中任一進制素樣式屬性（幾何尺寸沒有改變）發送改變時，render tree 都會重新畫，比如字型顔色，背景顔色等變化 || 渲染中的一種行為。render tree中任一進制素樣式屬性（幾何尺寸沒改變）發生改變了，render tree都會重新畫，比如字型顔色、背景等變化。

7.paint（周遊）:周遊render tree ，并調動硬體圖形API來繪制每個節點