渲染引擎——webkit和Gecko
Firefox使用Geoko——Mozilla自主研發的渲染引擎
Safari和Chrome都使用webkit，Webkit是一款開源渲染引擎
dom渲染流程：
1、瀏覽器解析html源碼，然後創建一個DOM樹。
在DOM樹中，每一個HTML標籤都有一個對應的節點(元素節點),並且每一個文本也都有一個對應的節點(文本節點)。DOM樹的根節點就是documentElement，對應的是html標籤。
2、瀏覽器解析CSS代碼，計算出最終的樣式數據。
對CSS代碼中非法的語法它會直接忽略掉。解析CSS的時候會按照如下順序來定義優先級：瀏覽器默認設置，用戶設置，外聯樣式，內聯樣式，html中的style(嵌在標籤中的行間樣式)。
3、創建完DOM樹並得到最終的樣式數據之後，構建一個渲染樹。
渲染樹和DOM樹有點像，但是有區別。DOM樹完全和html標籤一一對應，而渲染樹會忽略不需要渲染的元素(head、display:none的元素)。渲染樹中每一個節點都存儲着對應的CSS屬性。
4、當渲染樹創建完成之後，瀏覽器就可以根據渲染樹直接把頁面繪製到屏幕上。
渲染樹和Dom樹的關係
渲染對象和Dom元素相對應，但這種對應關係不是一對一的，不可見的Dom元素不會被插入渲染樹，例如head元素。另外，display屬性爲none的元素也不會在渲染樹中出現（visibility屬性爲hidden的元素將出現在渲染樹中）。
還有一些Dom元素對應幾個可見對象，它們一般是一些具有複雜結構的元素，無法用一個矩形來描述。例如，select元素有三個渲染對象——一個顯示區域、一個下拉列表及一個按鈕。同樣，當文本因爲寬度不夠而折行時，新行將作爲額外的渲染元素被添加。另一個多個渲染對象的例子是不規範的html，根據css規範，一個行內元素只能僅包含行內元素或僅包含塊狀元素，在存在混合內容時，將會創建匿名的塊狀渲染對象包裹住行內元素。
一些渲染對象和所對應的Dom節點不在樹上相同的位置，例如，浮動和絕對定位的元素在文本流之外，在兩棵樹上的位置不同，渲染樹上標識出真實的結構，並用一個佔位結構標識出它們原來的位置。