前兩天看到一篇不錯的英文文章，叫做How browsers work，該文概要的介紹了瀏覽器從頭到尾的工作機(jī)制，包括HTML等的解析，DOM樹的生成，節(jié)點(diǎn)與CSS的渲染等等，對于想學(xué)習(xí)瀏覽器源碼的同學(xué)來說，實(shí)在是很棒的一篇科普文章。盡管對于每部分，該文的描述并不足夠深入，但綜合來講，即使沒興趣學(xué)瀏覽器源碼，也還是有一些值的學(xué)習(xí)的思想在里面的，可以權(quán)當(dāng)開拓下視野，有益無害。
于是，我想分節(jié)挑重點(diǎn)翻譯一下與大家分享。以下為譯文：
當(dāng)今主流瀏覽器有五類： Internet Explorer, Firefox, Safari, Chrome 以及 Opera。 我會基于開源瀏覽器 Firefox, Chrome 與 Safari（部分開源）來舉例說明。 按照W3C 瀏覽器統(tǒng)計, 當(dāng)今(2009年10月), Firefox, Safari 及 Chrome 的總占有率已接近 60%，這是非?？捎^的。
瀏覽器的主要功能是展示網(wǎng)頁資源，也即請求服務(wù)器并將結(jié)果顯示在瀏覽器窗口中。資源的格式一般是HTML，但也有PDF、圖片等其它各種格式。資源的定位由URL來實(shí)現(xiàn)。更多細(xì)節(jié)請參考“網(wǎng)絡(luò)”一節(jié)。
瀏覽器釋與展現(xiàn)HTML文件的方式是參照HTML與CSS規(guī)范來的，這些規(guī)范由W3C (World Wide Web Consortium) Web標(biāo)準(zhǔn)化組織來維護(hù)。 當(dāng)前HTML版本是 4 (http://www.w3.org/TR/html401/)，HTML5正在進(jìn)行中。當(dāng)前CSS版本為2 (http://www.w3.org/TR/CSS2/)，同樣，版本3進(jìn)行中。
過去幾年里，各版本瀏覽器有許多各自的擴(kuò)展，這使網(wǎng)頁作者很難寫出兼容性好的內(nèi)容。如今這一嚴(yán)重的兼容性問題已經(jīng)開始好轉(zhuǎn)，各種瀏覽器都開始兼容標(biāo)準(zhǔn)規(guī)范。
各瀏覽器的用戶接口有很多相同的地方，下面是一些常用的用戶接口：
用于輸入URI的地址欄
前進(jìn)后退按鈕
書簽選項(xiàng)
刷新停止按鈕，用于控制頁面加載
主頁按鈕
很奇怪的是，瀏覽器的用戶接口并沒有寫進(jìn)任何規(guī)范中，這種極大的相似性只是在多年的實(shí)踐經(jīng)驗(yàn)以及瀏覽器之間的相互借鑒中形成的。HTML5規(guī)范沒有規(guī)定瀏覽器必須有哪些交互元素，但是列出了一些通用元素，比如地址欄, 狀態(tài)欄和工具欄。 當(dāng)然，特定瀏覽器有自己獨(dú)有的特性，如Firefox的下載管理器。更多內(nèi)容請參考用戶接口一節(jié)。
瀏覽器的主要概念如下 (1.1):
用戶接口 – 包括地址欄，前進(jìn)后退，書簽菜單等窗口上除了網(wǎng)頁顯示區(qū)域以外的部分。
瀏覽器引擎 – 查詢與操作渲染引擎的接口。
渲染引擎 – 負(fù)責(zé)顯示請求的內(nèi)容。比如請求到HTML, 它會負(fù)責(zé)解析HTML 與 CSS 并將結(jié)果顯示到窗口中。
網(wǎng)絡(luò) – 用于網(wǎng)絡(luò)請求, 如HTTP請求。它包括平臺無關(guān)的接口和各平臺獨(dú)立的實(shí)現(xiàn)。
UI后端 – 繪制基礎(chǔ)元件，如組合框與窗口。它提供平臺無關(guān)的接口，內(nèi)部使用操作系統(tǒng)的相應(yīng)實(shí)現(xiàn)。
JavaScript解釋器。用于解析執(zhí)行JavaScript代碼。
數(shù)據(jù)存儲。這是一個持久層。瀏覽器需要把所有數(shù)據(jù)存到硬盤上，如cookies。新的HTML規(guī)范 (HTML5) 規(guī)定了一個完整（雖然輕量級）的瀏覽器中的數(shù)據(jù)庫：’web database’。
圖1: 瀏覽器的主要概念
需要注意的是，與其它瀏覽器不同，chrome使用多個渲染引擎實(shí)例，每個Tab一個，每個Tab都是一個獨(dú)立進(jìn)程。
我會拿出一個章節(jié)來介紹每塊內(nèi)容。
Firefox 與 Chrome 開發(fā)了一種特殊的通信架構(gòu)，這會在一個特殊章節(jié)討論。
