共計 1632 個字符，預計需要花費 5 分鐘才能閱讀完成。

這是一個很經典的問題，我到現在還記得，許多年前找工作的時候，面試官曾經這樣問起我。

那是一個悶熱下午，我輾轉十幾站地鐵才來到面試的地方。面試官一開始問了幾個簡單的問題，都記不起來了。人的記憶就是這么功利，只有那些讓你特別爽或特別不爽的事情，才會被記下來。

“當你輸入了一個網址，敲下回車，直到你看到網頁為止，瀏覽器都干了什么？”后來面試官似乎很有自信的問。

我擦，這算什么問題，《程序員面試寶典》上沒講啊，只能碰運氣了。我試探性的說，“一開始嘛，瀏覽器肯定要檢查你的網址對不對，合不合法啊，比如你把 www.cctv.com 敲成了 www.ccav.com，它肯定覺得你是傻逼，不理你吧。”

“嗯，然后呢？”

“然后啊，然后它就連接到了網站的服務器，把網頁下載下來，就 ok 了”。

“沒了？”

“沒了。”

“好，下一位。”

“哎等等，我想起來了， 瀏覽器是不是要把網頁給轉換一下啊，畢竟我們下載下來網頁文件是這樣的:

而看到的卻是這樣的：

“是要轉換一下。何轉換呢，這才是重點。”面試官有點不大耐煩。“這個。。。”

我支支吾吾了半天，也沒說出個所以然。后來面試結果如何，我也記不清了，可能是被鄙視了，也可能是勉強過了，這不重要。重要的是，我們今天一定要搞清楚這個問題。

想象一下，如果你來做一個瀏覽器，你準備如何處理下載下來的網頁和其他資源呢？

我們知道，網頁是由 HTML 語言寫的，一般會有 CSS 來描述網頁的樣子，有的還有 JavaScript 來實現一些復雜的功能。這三者各司其職，其中 HTML 負責構建網頁的框架，它規定了哪里是標題區域，哪里是內容區域，哪里是導航區域。

CSS 負責美化網頁的外表，它主要關心這個標題該用多大的字體，用什么顏色之類的問題。

JavaScript 是一門正兒八經的編程語言，用它來做一些高級的功能，比如對用戶的操作做出相應，再比如后臺上傳一個文件。

對應的，瀏覽器也要具備轉換和解析這三個家伙的能力。

對于 HTML 和 CSS，不同的瀏覽器有不同的解析引擎，比如 IE 用的是自家的 Trident 內核，Safari 和早期的 Chrome 用的是蘋果開源的 webkit 內核（后來 chrome 換成了谷歌的 blink 內核）。不管用什么內核，其功能都是一樣的，就是把下載下來的網頁代碼繪制出來。

對于 JavaScript，webkit 有默認的 JavaScript 解析引擎，但是 chrome 替換成了 V8。我們之前講過，像這種腳本語言，需要有個東西把它翻譯成計算機能理解的機器語言。對應到瀏覽器里，則是把 JavaScript 翻譯成瀏覽器能理解的代碼。

湊齊了家伙之后，就可以開工了。主要有三個階段：

1、生成 DOM 樹。

你仔細看上面的 HTML 代碼，他們是有層級之分的，最外層的是里面是內容，再里面是段落

，就好像我們蓋樓，先搭最外面的架子，然后是樓梯和一層又一層，每一層有很多戶，每一戶又有廚房、客廳、臥室。DOM 樹也是如此。樹是數據結構的一種，我們改天詳細講，你只需要知道它是用來輔助處理 HTML 的層級結構的，就行了。

2、生成渲染樹。 有了 DOM 樹，我們知道了網頁里節點和節點之間的層級關系。再加上 CSS 對這些節點的樣式描述，我們就可以生成另外一棵樹，渲染樹。顧名思義，渲染樹就是用來渲染和顯示的。離我們的目標又近了一步，不是嗎？

3、測量、排版、繪制。 還記得《什么是渲染？》嗎？這篇文章講的是操作系統渲染的過程，跟瀏覽器是一模一樣的。可見技術是相通的。你今天在做前端，明天派你去做 Android，你會發現除了編程語言不一樣，知識還是那些知識，方法還是那些方法。

看起來很簡單是不？其實不然。一般瀏覽器代碼量非常龐大，因為它需要處理的事情實在是太多了。連接服務器下載網頁需要非常可靠的網絡模塊；解析 HTML、CSS、JavaScript 要用程序員最頭疼的編譯原理；有的網頁非常復雜，特效、裝飾、掛件滿天飛（沒錯，你知道我在說什么網站），瀏覽器要非常小心的處理渲染的性能問題。

丸趣 TV 網 – 提供最優質的資源集合！