[置頂]現(xiàn)代瀏覽器的工作原理-創(chuàng)新互聯(lián)
簡介
瀏覽器可以被認(rèn)為是使用最廣泛的軟件，本文將介紹瀏覽器的工 作原理，我們將看到，從你在地址欄輸入google.com到你看到google主頁過程中都發(fā)生了什么。
將討論的瀏覽器
今天，有五種主流瀏覽器——IE、Firefox、Safari、Chrome及Opera。本文將基于一些開源瀏覽器的例子——Firefox、 Chrome及Safari，Safari是部分開源的。
根據(jù)W3C（World Wide Web Consortium 萬維網(wǎng)聯(lián)盟）的瀏覽器統(tǒng)計(jì)數(shù)據(jù)，當(dāng)前（2011年9月），F(xiàn)irefox、Safari及Chrome的市場占有率綜合已快接近50％。（原文為2009年10月，數(shù)據(jù)沒有太大變化）因此，可以說開源瀏覽器將近占據(jù)了瀏覽器市場的半壁江山。
瀏覽器的主要功能
瀏覽器的主要功能是將用戶選擇得web資源呈現(xiàn)出來，它需要從服務(wù)器請求資源，并將其顯示在瀏覽器窗口中，資源的格式通常是HTML，也包括PDF、image及其他格式。用戶用URI（Uniform Resource Identifier 統(tǒng)一資源標(biāo)識符）來指定所請求資源的位置，在網(wǎng)絡(luò)一章有更多討論。
HTML和CSS規(guī)范中規(guī)定了瀏覽器解釋html文檔的方式，由 W3C組織對這些規(guī)范進(jìn)行維護(hù)，W3C是負(fù)責(zé)制定web標(biāo)準(zhǔn)的組織。
HTML規(guī)范的最新版本是HTML4(http://www.w3.org/TR/html401/)，HTML5還在制定中（譯注：兩年前），最新的CSS規(guī)范版本是2（http://www.w3.org/TR/CSS2），CSS3也還正在制定中（譯注：同樣兩年前）。
這些年來，瀏覽器廠商紛紛開發(fā)自己的擴(kuò)展，對規(guī)范的遵循并不完善，這為web開發(fā)者帶來了嚴(yán)重的兼容性問題。
但是，瀏覽器的用戶界面則差不多，常見的用戶界面元素包括：
▲用來輸入U(xiǎn)RI的地址欄
▲前進(jìn)、后退按鈕
▲書簽選項(xiàng)
▲用于刷新及暫停當(dāng)前加載文檔的刷新、暫停按鈕
▲用于到達(dá)主頁的主頁按鈕
奇怪的是，并沒有哪個(gè)正式公布的規(guī)范對用戶界面做出規(guī)定，這些是多年來各瀏覽器廠商之間相互模仿和不斷改進(jìn)得結(jié)果。
HTML5并沒有規(guī)定瀏覽器必須具有的UI元素，但列出了一些常用元素，包括地址欄、狀態(tài)欄及工具欄。還有一些瀏覽器有自己專有得功能，比如Firefox得下載管理。更多相關(guān)內(nèi)容將在后面討論用戶界面時(shí)介紹。
瀏覽器的主要構(gòu)成High Level Structure
瀏覽器的主要組件包括：
▲用戶界面－ 包括地址欄、后退/前進(jìn)按鈕、書簽?zāi)夸浀龋簿褪悄闼吹降某擞脕盹@示你所請求頁面的主窗口之外的其他部分
▲瀏覽器引擎－ 用來查詢及操作渲染引擎的接口
▲渲染引擎－ 用來顯示請求的內(nèi)容，例如，如果請求內(nèi)容為html，它負(fù)責(zé)解析html及css，并將解析后的結(jié)果顯示出來
▲網(wǎng)絡(luò)－ 用來完成網(wǎng)絡(luò)調(diào)用，例如http請求，它具有平臺無關(guān)的接口，可以在不同平臺上工作
UI 后端－ 用來繪制類似組合選擇框及對話框等基本組件，具有不特定于某個(gè)平臺的通用接口，底層使用操作系統(tǒng)的用戶接口
▲JS解釋器－ 用來解釋執(zhí)行JS代碼
▲數(shù)據(jù)存儲－ 屬于持久層，瀏覽器需要在硬盤中保存類似cookie的各種數(shù)據(jù)，HTML5定義了web database技術(shù)，這是一種輕量級完整的客戶端存儲技術(shù)
![[置頂] 現(xiàn)代瀏覽器的工作原理](/upload/otherpic25/106834.jpg)
圖1：瀏覽器主要組件
需要注意的是，不同于大部分瀏覽器，Chrome為每個(gè)Tab分配了各自的渲染引擎實(shí)例，每個(gè)Tab就是一個(gè)獨(dú)立的進(jìn)程。
對于構(gòu)成瀏覽器的這些組件，后面會逐一詳細(xì)討論。
組件間的通信 Communication between the components
Firefox和Chrome都開發(fā)了一個(gè)特殊的通信結(jié)構(gòu)，后面將有專門的一章進(jìn)行討論。
渲染引擎 The rendering engine
渲染引擎的職責(zé)就是渲染，即在瀏覽器窗口中顯示所請求的內(nèi)容。
默認(rèn)情況下，渲染引擎可以顯示html、xml文檔及圖片，它也可以借助插件（一種瀏覽器擴(kuò)展）顯示其他類型數(shù)據(jù)，例如使用PDF閱讀器插件，可以顯示PDF格式，將由專門一章講解插件及擴(kuò)展，這里只討論渲染引擎最主要的用途——顯示應(yīng)用了CSS之后的html及圖片。
渲染引擎 Rendering engines
本文所討論得瀏覽器——Firefox、Chrome和Safari是基于兩種渲染引擎構(gòu)建的，F(xiàn)irefox使用Geoko——Mozilla自主研發(fā)的渲染引擎，Safari和Chrome都使用webkit。
Webkit是一款開源渲染引擎，它本來是為linux平臺研發(fā)的，后來由Apple移植到Mac及Windows上，相關(guān)內(nèi)容請參考http://webkit.org。
主流程 The main flow
渲染引擎首先通過網(wǎng)絡(luò)獲得所請求文檔的內(nèi)容，通常以8K分塊的方式完成。
下面是渲染引擎在取得內(nèi)容之后的基本流程：
解析html以構(gòu)建dom樹->構(gòu)建render樹->布局render樹->繪制render樹
![[置頂] 現(xiàn)代瀏覽器的工作原理](/upload/otherpic25/106860.jpg)
圖2：渲染引擎基本流程
渲染引擎開始解析html，并將標(biāo)簽轉(zhuǎn)化為內(nèi)容樹中的dom節(jié)點(diǎn)。接著，它解析外部CSS文件及style標(biāo)簽中的樣式信息。這些樣式信息以及html中的可見性指令將被用來構(gòu)建另一棵樹——render樹。
Render樹由一些包含有顏色和大小等屬性的矩形組成，它們將被按照正確的順序顯示到屏幕上。
Render樹構(gòu)建好了之后，將會執(zhí)行布局過程，它將確定每個(gè)節(jié)點(diǎn)在屏幕上的確切坐標(biāo)。再下一步就是繪制，即遍歷render樹，并使用UI后端層繪制每個(gè)節(jié)點(diǎn)。
值得注意的是，這個(gè)過程是逐步完成的，為了更好的用戶體驗(yàn)，渲染引擎將會盡可能早的將內(nèi)容呈現(xiàn)到屏幕上，并不會等到所有的html都解析完成之后再去構(gòu)建和布局render樹。它是解析完一部分內(nèi)容就顯示一部分內(nèi)容，同時(shí)，可能還在通過網(wǎng)絡(luò)下載其余內(nèi)容。
![[置頂] 現(xiàn)代瀏覽器的工作原理](/upload/otherpic25/106894.jpg)
圖3：webkit主流程
![[置頂] 現(xiàn)代瀏覽器的工作原理](/upload/otherpic25/106908.jpg)
圖4：Mozilla的Geoko 渲染引擎主流程
從圖3和4中可以看出，盡管webkit和Gecko使用的術(shù)語稍有不同，他們的主要流程基本相同。Gecko稱可見的格式化元素組成的樹為frame樹，每個(gè)元素都是一個(gè)frame，webkit則使用render樹這個(gè)名詞來命名由渲染對象組成的樹。Webkit中元素的定位稱為布局，而Gecko中稱為回流。Webkit稱利用dom節(jié)點(diǎn)及樣式信息去構(gòu)建render樹的過程為attachment，Gecko在html和dom樹之間附加了一層，這層稱為內(nèi)容接收器，相當(dāng)制造dom元素的工廠。下面將討論流程中的各個(gè)階段。
解析 Parsing－general
既然解析是渲染引擎中一個(gè)非常重要的過程，我們將稍微深入的研究它。首先簡要介紹一下解析。
解析一個(gè)文檔即將其轉(zhuǎn)換為具有一定意義的結(jié)構(gòu)——編碼可以理解和使用的東西。解析的結(jié)果通常是表達(dá)文檔結(jié)構(gòu)的節(jié)點(diǎn)樹，稱為解析樹或語法樹。
例如，解析“2＋3－1”這個(gè)表達(dá)式，可能返回這樣一棵樹。
![[置頂] 現(xiàn)代瀏覽器的工作原理](/upload/otherpic25/106921.jpg)
圖5：數(shù)學(xué)表達(dá)式樹節(jié)點(diǎn)
文法 Grammars
解析基于文檔依據(jù)的語法規(guī)則——文檔的語言或格式。每種可被解析的格式必須具有由詞匯及語法規(guī)則組成的特定的文法，稱為上下文無關(guān)文法。人類語言不具有這一特性，因此不能被一般的解析技術(shù)所解析。
解析器－詞法分析器 Parser－Lexer combination
解析可以分為兩個(gè)子過程——語法分析及詞法分析
詞法分析就是將輸入分解為符號，符號是語言的詞匯表——基本有效單元的集合。對于人類語言來說，它相當(dāng)于我們字典中出現(xiàn)的所有單詞。
語法分析指對語言應(yīng)用語法規(guī)則。
解析器一般將工作分配給兩個(gè)組件——詞法分析器（有時(shí)也叫分詞器）負(fù)責(zé)將輸入分解為合法的符號，解析器則根據(jù)語言的語法規(guī)則分析文檔結(jié)構(gòu)，從而構(gòu)建解析樹，詞法分析器知道怎么跳過空白和換行之類的無關(guān)字符。
![[置頂] 現(xiàn)代瀏覽器的工作原理](/upload/otherpic25/106935.jpg)
圖6：從源文檔到解析樹
解析過程是迭代的，解析器從詞法分析器處取道一個(gè)新的符號，并試著用這個(gè)符號匹配一條語法規(guī)則， 如果匹配了一條規(guī)則，這個(gè)符號對應(yīng)的節(jié)點(diǎn)將被添加到解析樹上，然后解析器請求另一個(gè)符號。如果沒有匹配到規(guī)則，解析器將在內(nèi)部保存該符號，并從詞法分析器 取下一個(gè)符號，直到所有內(nèi)部保存的符號能夠匹配一項(xiàng)語法規(guī)則。如果最終沒有找到匹配的規(guī)則，解析器將拋出一個(gè)異常，這意味著文檔無效或是包含語法錯(cuò)誤。
轉(zhuǎn)換 Translation
很多時(shí)候，解析樹并不是最終結(jié)果。解析一般在轉(zhuǎn)換中使用——將輸入文檔轉(zhuǎn)換為另一種格式。編譯就是個(gè)例子，編譯器在將一段源碼編譯為機(jī)器碼的時(shí)候，先將源碼解析為解析樹，然后將該樹轉(zhuǎn)換為一個(gè)機(jī)器碼文檔。
![[置頂] 現(xiàn)代瀏覽器的工作原理](/upload/otherpic25/106942.jpg)
圖7：編譯流程
解析實(shí)例 Parsing example
圖5中，我們從一個(gè)數(shù)學(xué)表達(dá)式構(gòu)建了一個(gè)解析樹，這里定義一個(gè)簡單的數(shù)學(xué)語言來看下解析過程。
詞匯表：我們的語言包括整數(shù)、加號及減號。
語法：
1. 該語言的語法基本單元包括表達(dá)式、term及操作符
2. 該語言可以包括多個(gè)表達(dá)式
3. 一個(gè)表達(dá)式定義為兩個(gè)term通過一個(gè)操作符連接
4. 操作符可以是加號或減號
5. term可以是一個(gè)整數(shù)或一個(gè)表達(dá)式
現(xiàn)在來分析一下“2＋3－1”這個(gè)輸入
第一個(gè)匹配規(guī)則的子字符串是“2”，根據(jù)規(guī)則5，它是一個(gè)term，第二個(gè)匹配的是“2＋3”，它符合第2條規(guī)則——一個(gè)操作符連接兩個(gè)term，下一次匹配發(fā)生在輸入的結(jié)束處?！?＋3－1”是一個(gè)表達(dá)式，因?yàn)槲覀円呀?jīng)知道“2＋3”是一個(gè)term，所以我們有了一個(gè)term緊跟著一個(gè)操作符及另一個(gè)term?！?＋＋”將不會匹配任何規(guī)則，因此是一個(gè)無效輸入。
詞匯表及語法的定義
詞匯表通常利用正則表達(dá)式來定義。
例如上面的語言可以定義為：
| 1 另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
網(wǎng)站題目：[置頂]現(xiàn)代瀏覽器的工作原理-創(chuàng)新互聯(lián)
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、網(wǎng)站收錄、品牌網(wǎng)站設(shè)計(jì)、營銷型網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站建設(shè) 聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián) 猜你還喜歡下面的內(nèi)容 
|