瀏覽器的渲染原理簡介

看到這個標題你們必定會想到這篇神文《How Browsers Work》，這篇文章把瀏覽器的不少細節講得很細，並且也被翻譯成了中文。爲何我還想寫一篇呢？由於兩個緣由， 

• 這篇文章太長了，閱讀成本太大，不能一口氣讀完。
• 花了大力氣讀了這篇文章後能夠了解不少，但彷佛對工做沒什麼幫助。

因此，我準備寫下這篇文章來解決上述兩個問題。但願你能在上班途中，或是坐馬桶時就能讀完，並能從中學會一些能用在工做上的東西。 

瀏覽器工做大流程 

廢話少說，先來看個圖： 

從上面這個圖中，咱們能夠看到那麼幾個事： 

1）瀏覽器會解析三個東西： 

• 一個是HTML/SVG/XHTML，事實上，Webkit有三個C++的類對應這三類文檔。解析這三種文件會產生一個DOM Tree。
• CSS，解析CSS會產生CSS規則樹。
• Javascript，腳本，主要是經過DOM API和CSSOM API來操做DOM Tree和CSS Rule Tree.

2） 解析完成後，瀏覽器引擎會經過DOM Tree 和 CSS Rule Tree 來構造 Rendering Tree。注意： 

• Rendering Tree 渲染樹並不等同於DOM樹，由於一些像Header或display:none的東西就不必放在渲染樹中了。
• CSS 的 Rule Tree主要是爲了完成匹配並把CSS Rule附加上Rendering Tree上的每一個Element。也就是DOM結點。也就是所謂的Frame。
• 而後，計算每一個Frame（也就是每一個Element）的位置，這又叫layout和reflow過程。

3）最後經過調用操做系統Native GUI的API繪製。 

DOM解析 

HTML的DOM Tree解析以下： 

Html代碼 

1. <</span>html>  
2. <</span>html>  
3. <</span>head>  
4.     <</span>title>Web page parsing</</span>title>  
5. </</span>head>  
6. <</span>body>  
7.     <</span>div>  
8.         <</span>h1>Web page parsing</</span>h1>  
9.         <</span>p>This is an example Web page.</</span>p>  
10.     </</span>div>  
11. </</span>body>  
12. </</span>html>  

上面這段HTML會解析成這樣： 

下面是另外一個有SVG標籤的狀況。 

CSS解析 

CSS的解析大概是下面這個樣子（下面主要說的是Gecko也就是Firefox的玩法），假設咱們有下面的HTML文檔： 

Html代碼