看到這個標題大家一定會想到這篇神文《How Browsers Work》，這篇文章把瀏覽器的很多細節講得很細，而且也被翻譯成了中文。為什麼我還想寫一篇呢？因為兩個原因，
1）這篇文章太長了，閱讀成本太大，不能一口氣讀完。
2）花了大力氣讀了這篇文章後可以瞭解很多，但似乎對工作沒什麼幫助。
所以，我準備寫下這篇文章來解決上述兩個問題。希望你能在上班途中，或是坐馬桶時就能讀完，並能從中學會一些能用在工作上的東西。
瀏覽器工作大流程
廢話少說，先來看個圖：
從上面這個圖中，我們可以看到那麼幾個事：
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繪製。
