瀏覽器載入了html和css是怎樣呈現在瀏覽器上面的呢？
這個底層的原理需要我們瞭解
這樣我們才能夠進一步做出一些效能優化

瀏覽器渲染大體上分為以下五步

1. 處理html生成 DOM（Document Object Model） Tree
2. 處理css生成 CSSOM（CSS Object Model） Tree
3. DOM樹與CSS-DOM樹合併為Render樹
4. 對Render樹進行佈局計算
5. 遍歷Render樹的每一個節點繪製到螢幕

下面我們細化一下這些步驟

DOM樹生成

瀏覽器把得到的html程式碼轉換為一個DOM樹
我們html文件中的每一個tag標籤都是一個DOM樹的節點（文字節點也是）
DOM樹的根節點就是我們的document物件
這裡要注意，我們用js動態生成的DOM節點也在DOM樹上

CSSOM樹生成

瀏覽器會把所有的樣式解析為樣式結構體
（包括css樣式和瀏覽器預設樣式）
當然瀏覽器識別不了的樣式不能解析
最後生成了CSSOM樹

Render樹生成

Render樹我們叫它渲染樹
它是由DOM樹和CSSOM樹合成的
渲染樹的每一個節點都有自己的style樣式
渲染樹上沒有隱藏的節點，比如display：block和無樣式head節點
因為這些節點不會呈現也不影響呈現
（visibility:hidden會存在渲染樹，因為它佔有空間，會影響佈局）

佈局計算

在這個階段會根據Render樹的樣式計算佈局
輸出的結果稱為box盒模型（width,height,margin,padding,border,left,top,…）
盒模型精確表示了每一個元素的位置和大小
所有相對度量單位都轉化為了絕對單位

繪製

最後將資訊渲染到螢幕中每一個真實的畫素點
這個過程叫繪製或者rasterizing格柵化