簡(jiǎn)介
瀏覽器可以被認(rèn)為是使用最廣泛的軟件础芍，本文將介紹瀏覽器的工 作原理杈抢，我們將看到，從你在地址欄輸入google.com到你看到google主頁(yè)過(guò)程中都發(fā)生了什么仑性。
將討論的瀏覽器
今天惶楼，有五種主流瀏覽器——IE、Firefox诊杆、Safari歼捐、Chrome及Opera。
本文將基于一些開(kāi)源瀏覽器的例子——Firefox晨汹、 Chrome及Safari豹储，Safari是部分開(kāi)源的。
根據(jù)W3C（World Wide Web Consortium 萬(wàn)維網(wǎng)聯(lián)盟）的瀏覽器統(tǒng)計(jì)數(shù)據(jù)淘这，當(dāng)前（2011年9月）剥扣，F(xiàn)irefox、Safari及Chrome的市場(chǎng)占有率綜合已快接近50％铝穷。（原文為2009年10月钠怯，數(shù)據(jù)沒(méi)有太大變化）因此，可以說(shuō)開(kāi)源瀏覽器將近占據(jù)了瀏覽器市場(chǎng)的半壁江山曙聂。
瀏覽器的主要功能
瀏覽器的主要功能是將用戶選擇得web資源呈現(xiàn)出來(lái)晦炊，它需要從服務(wù)器請(qǐng)求資源，并將其顯示在瀏覽器窗口中，資源的格式通常是HTML断国，也包括PDF贤姆、image及其他格式。用戶用URI（Uniform Resource Identifier 統(tǒng)一資源標(biāo)識(shí)符）來(lái)指定所請(qǐng)求資源的位置稳衬，在網(wǎng)絡(luò)一章有更多討論庐氮。
HTML和CSS規(guī)范中規(guī)定了瀏覽器解釋html文檔的方式，由 W3C組織對(duì)這些規(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也還正在制定中（譯注：同樣兩年前）慨畸。
這些年來(lái)莱坎，瀏覽器廠商紛紛開(kāi)發(fā)自己的擴(kuò)展，對(duì)規(guī)范的遵循并不完善寸士，這為web開(kāi)發(fā)者帶來(lái)了嚴(yán)重的兼容性問(wèn)題檐什。
但是，瀏覽器的用戶界面則差不多弱卡，常見(jiàn)的用戶界面元素包括：
用來(lái)輸入U(xiǎn)RI的地址欄
前進(jìn)乃正、后退按鈕
書(shū)簽選項(xiàng)
用于刷新及暫停當(dāng)前加載文檔的刷新、暫停按鈕
用于到達(dá)主頁(yè)的主頁(yè)按鈕

奇怪的是婶博，并沒(méi)有哪個(gè)正式公布的規(guī)范對(duì)用戶界面做出規(guī)定瓮具，這些是多年來(lái)各瀏覽器廠商之間相互模仿和不斷改進(jìn)得結(jié)果。
HTML5并沒(méi)有規(guī)定瀏覽器必須具有的UI元素凡人，但列出了一些常用元素名党，包括地址欄、狀態(tài)欄及工具欄挠轴。還有一些瀏覽器有自己專有得功能传睹，比如Firefox得下載管理。更多相關(guān)內(nèi)容將在后面討論用戶界面時(shí)介紹岸晦。
瀏覽器的主要構(gòu)成High Level Structure
瀏覽器的主要組件包括：
用戶界面－ 包括地址欄欧啤、后退/前進(jìn)按鈕、書(shū)簽?zāi)夸浀任海簿褪悄闼吹降某擞脕?lái)顯示你所請(qǐng)求頁(yè)面的主窗口之外的其他部分
瀏覽器引擎－ 用來(lái)查詢及操作渲染引擎的接口
渲染引擎－ 用來(lái)顯示請(qǐng)求的內(nèi)容堂油，例如，如果請(qǐng)求內(nèi)容為html碧绞，它負(fù)責(zé)解析html及css府框，并將解析后的結(jié)果顯示出來(lái)
網(wǎng)絡(luò)－ 用來(lái)完成網(wǎng)絡(luò)調(diào)用，例如http請(qǐng)求，它具有平臺(tái)無(wú)關(guān)的接口迫靖，可以在不同平臺(tái)上工作
UI 后端－ 用來(lái)繪制類似組合選擇框及對(duì)話框等基本組件院峡，具有不特定于某個(gè)平臺(tái)的通用接口，底層使用操作系統(tǒng)的用戶接口
JS解釋器－ 用來(lái)解釋執(zhí)行JS代碼
數(shù)據(jù)存儲(chǔ)－ 屬于持久層，瀏覽器需要在硬盤中保存類似cookie的各種數(shù)據(jù)，HTML5定義了web database技術(shù)摇展，這是一種輕量級(jí)完整的客戶端存儲(chǔ)技術(shù)

1. 該語(yǔ)言的語(yǔ)法基本單元包括表達(dá)式朦前、term及操作符
2. 該語(yǔ)言可以包括多個(gè)表達(dá)式
3. 一個(gè)表達(dá)式定義為兩個(gè)term通過(guò)一個(gè)操作符連接
4. 操作符可以是加號(hào)或減號(hào)
5. term可以是一個(gè)整數(shù)或一個(gè)表達(dá)式
   現(xiàn)在來(lái)分析一下“2＋3－1”這個(gè)輸入
   第一個(gè)匹配規(guī)則的子字符串是“2”往核，根據(jù)規(guī)則5得哆，它是一個(gè)term硬梁，第二個(gè)匹配的是“2＋3”歇式，它符合第2條規(guī)則——一個(gè)操作符連接兩個(gè)term汗茄，下一次匹配發(fā)生在輸入的結(jié)束處。“2＋3－1”是一個(gè)表達(dá)式吱晒，因?yàn)槲覀円呀?jīng)知道“2＋3”是一個(gè)term甸饱，所以我們有了一個(gè)term緊跟著一個(gè)操作符及另一個(gè)term÷乇簦“2＋＋”將不會(huì)匹配任何規(guī)則柜候，因此是一個(gè)無(wú)效輸入。
   詞匯表及語(yǔ)法的定義
   詞匯表通常利用正則表達(dá)式來(lái)定義躏精。
   例如上面的語(yǔ)言可以定義為：
   INTEGER：0｜［1－9］［0－9］＊
   PLUS：＋
   MINUS：－
   正如看到的渣刷，這里用正則表達(dá)式定義整數(shù)。
   語(yǔ)法通常用BNF格式定義矗烛，我們的語(yǔ)言可以定義為：
   expression :＝ term operation term
   operation := PLUS | MINUS
   term := INTEGER | expression
   如果一個(gè)語(yǔ)言的文法是上下文無(wú)關(guān)的辅柴，則它可以用正則解析器來(lái)解析。對(duì)上下文無(wú)關(guān)文法的一個(gè)直觀的定義是瞭吃，該文法可以用BNF來(lái)完整的表達(dá)碌嘀。可查看http://en.wikipedia.org/wiki/Context-free_grammar歪架。
   解析器類型 Types of parsers
   有兩種基本的解析器——自頂向下解析及自底向上解析股冗。比較直觀的解釋是，自頂向下解析和蚪，查看語(yǔ)法的最高層結(jié)構(gòu)并試著匹配其中一個(gè)止状；自底向上解析則從輸入開(kāi)始烹棉，逐步將其轉(zhuǎn)換為語(yǔ)法規(guī)則，從底層規(guī)則開(kāi)始直到匹配高層規(guī)則怯疤。
   來(lái)看一下這兩種解析器如何解析上面的例子：
   自頂向下解析器從最高層規(guī)則開(kāi)始——它先識(shí)別出“2＋3“浆洗，將其視為一個(gè)表達(dá)式，然后識(shí)別出”2＋3－1“為一個(gè)表達(dá)式（識(shí)別表達(dá)式的過(guò)程中匹配了其他規(guī)則集峦，但出發(fā)點(diǎn)是最高層規(guī)則）伏社。
   自底向上解析會(huì)掃描輸入直到匹配了一條規(guī)則，然后用該規(guī)則取代匹配的輸入塔淤，直到解析完所有輸入摘昌。部分匹配的表達(dá)式被放置在解析堆棧中。
   Stack

Input

2 + 3 – 1

term

• 3 - 1

term operation
3 – 1

expression

• 1

expression operation
1

expression

自底向上解析器稱為shift reduce 解析器高蜂，因?yàn)檩斎胂蛴乙苿?dòng)（想象一個(gè)指針首先指向輸入開(kāi)始處聪黎，并向右移動(dòng)），并逐漸簡(jiǎn)化為語(yǔ)法規(guī)則妨马。
自動(dòng)化解析 Generating parse
解析器生成器這個(gè)工具可以自動(dòng)生成解析器挺举，只需要指定語(yǔ)言的文法——詞匯表及語(yǔ)法規(guī)則杀赢，它就可以生成一個(gè)解析器烘跺。創(chuàng)建一個(gè)解析器需要對(duì)解析有深入的理解，而且手動(dòng)的創(chuàng)建一個(gè)由較好性能的解析器并不容易脂崔，所以解析生成器很有用滤淳。Webkit使用兩個(gè)知名的解析生成器——用于創(chuàng)建語(yǔ)法分析器的Flex及創(chuàng)建解析器的Bison（你可能接觸過(guò)Lex和Yacc）。Flex的輸入是一個(gè)包含了符號(hào)定義的正則表達(dá)式砌左，Bison的輸入是用BNF格式表示的語(yǔ)法規(guī)則脖咐。rs automatically
HTML解析器 HTML Parser
HTML解析器的工作是將html標(biāo)識(shí)解析為解析樹(shù)。
HTML文法定義 The HTML grammar definition
W3C組織制定規(guī)范定義了HTML的詞匯表和語(yǔ)法汇歹。
非上下文無(wú)關(guān)文法 Not a context free grammar
正如在解析簡(jiǎn)介中提到的屁擅，上下文無(wú)關(guān)文法的語(yǔ)法可以用類似BNF的格式來(lái)定義。
不幸的是产弹，所有的傳統(tǒng)解析方式都不適用于html（當(dāng)然我提出它們并不只是因?yàn)楹猛媾筛瑁鼈儗⒂脕?lái)解析css和js），html不能簡(jiǎn)單的用解析所需的上下文無(wú)關(guān)文法來(lái)定義痰哨。
Html 有一個(gè)正式的格式定義——DTD（Document Type Definition 文檔類型定義）——但它并不是上下文無(wú)關(guān)文法胶果，html更接近于xml，現(xiàn)在有很多可用的xml解析器斤斧，html有個(gè)xml的變體——xhtml早抠，它們間的不同在于，html更寬容撬讽，它允許忽略一些特定標(biāo)簽蕊连，有時(shí)可以省略開(kāi)始或結(jié)束標(biāo)簽悬垃。總的來(lái)說(shuō)咪奖，它是一種soft語(yǔ)法盗忱，不像xml呆板、固執(zhí)羊赵。
顯然趟佃，這個(gè)看起來(lái)很小的差異卻帶來(lái)了很大的不同。一方面昧捷，這是html流行的原因——它的寬容使web開(kāi)發(fā)人員的工作更加輕松闲昭，但另一方面，這也使很難去寫一個(gè)格式化的文法靡挥。所以序矩，html的解析并不簡(jiǎn)單，它既不能用傳統(tǒng)的解析器解析跋破，也不能用xml解析器解析簸淀。
HTML DTD
Html適用DTD格式進(jìn)行定義，這一格式是用于定義SGML家族的語(yǔ)言毒返，包括了對(duì)所有允許元素及它們的屬性和層次關(guān)系的定義租幕。正如前面提到的，html DTD并沒(méi)有生成一種上下文無(wú)關(guān)文法拧簸。
DTD有一些變種劲绪，標(biāo)準(zhǔn)模式只遵守規(guī)范，而其他模式則包含了對(duì)瀏覽器過(guò)去所使用標(biāo)簽的支持盆赤，這么做是為了兼容以前內(nèi)容贾富。最新的標(biāo)準(zhǔn)DTD在http://www.w3.org/TR/html4/strict.dtd
DOM
輸出的樹(shù)，也就是解析樹(shù)牺六，是由DOM元素及屬性節(jié)點(diǎn)組成的颤枪。DOM是文檔對(duì)象模型的縮寫，它是html文檔的對(duì)象表示淑际，作為html元素的外部接口供js等調(diào)用畏纲。
樹(shù)的根是“document”對(duì)象。
DOM和標(biāo)簽基本是一一對(duì)應(yīng)的關(guān)系庸追，例如霍骄，如下的標(biāo)簽：
<html>
<body>
<p>
Hello DOM
</p>
<div><img src=”example.png” /></div>
</body>
</html>
將會(huì)被轉(zhuǎn)換為下面的DOM樹(shù)：

1. 這門語(yǔ)言本身的寬容特性
2. 瀏覽器對(duì)一些常見(jiàn)的非法html有容錯(cuò)機(jī)制
3. 解析過(guò)程是往復(fù)的，通常源碼不會(huì)在解析過(guò)程中發(fā)生改變逻锐，但在html中夫晌，腳本標(biāo)簽包含的“document.write ”可能添加標(biāo)簽，這說(shuō)明在解析過(guò)程中實(shí)際上修改了輸入
   不能使用正則解析技術(shù)昧诱，瀏覽器為html定制了專屬的解析器晓淀。
   Html5規(guī)范中描述了這個(gè)解析算法，算法包括兩個(gè)階段——符號(hào)化及構(gòu)建樹(shù)盏档。
   符號(hào)化是詞法分析的過(guò)程凶掰，將輸入解析為符號(hào)，html的符號(hào)包括開(kāi)始標(biāo)簽蜈亩、結(jié)束標(biāo)簽懦窘、屬性名及屬性值。
   符號(hào)識(shí)別器識(shí)別出符號(hào)后稚配，將其傳遞給樹(shù)構(gòu)建器畅涂，并讀取下一個(gè)字符，以識(shí)別下一個(gè)符號(hào)药有，這樣直到處理完所有輸入毅戈。
   
   
   圖9：HTML解析流程
   符號(hào)識(shí)別算法 The tokenization algorithm
   算法輸出html符號(hào)苹丸，該算法用狀態(tài)機(jī)表示愤惰。每次讀取輸入流中的一個(gè)或多個(gè)字符，并根據(jù)這些字符轉(zhuǎn)移到下一個(gè)狀態(tài)赘理，當(dāng)前的符號(hào)狀態(tài)及構(gòu)建樹(shù)狀態(tài)共同影響結(jié)果宦言，這意味著，讀取同樣的字符商模，可能因?yàn)楫?dāng)前狀態(tài)的不同奠旺，得到不同的結(jié)果以進(jìn)入下一個(gè)正確的狀態(tài)。
   這個(gè)算法很復(fù)雜施流，這里用一個(gè)簡(jiǎn)單的例子來(lái)解釋這個(gè)原理响疚。
   基本示例——符號(hào)化下面的html：
   <html>
   <body>
   Hello world
   </body>
   </html>
   初始狀態(tài)為“Data State”，當(dāng)遇到“<”字符瞪醋，狀態(tài)變?yōu)椤癟ag open state”忿晕，讀取一個(gè)a－z的字符將產(chǎn)生一個(gè)開(kāi)始標(biāo)簽符號(hào)，狀態(tài)相應(yīng)變?yōu)椤癟ag name state”银受，一直保持這個(gè)狀態(tài)直到讀取到“>”践盼，每個(gè)字符都附加到這個(gè)符號(hào)名上鸦采，例子中創(chuàng)建的是一個(gè)html符號(hào)。
   當(dāng)讀取到“>”咕幻，當(dāng)前的符號(hào)就完成了渔伯，此時(shí)，狀態(tài)回到“Data state”肄程，“<body>”重復(fù)這一處理過(guò)程锣吼。到這里，html和body標(biāo)簽都識(shí)別出來(lái)了±堆幔現(xiàn)在吐限，回到“Data state”，讀取“Hello world”中的字符“H”將創(chuàng)建并識(shí)別出一個(gè)字符符號(hào)褂始，這里會(huì)為“Hello world”中的每個(gè)字符生成一個(gè)字符符號(hào)诸典。
   這樣直到遇到“</body>”中的“<”。現(xiàn)在崎苗，又回到了“Tag open state”狐粱，讀取下一個(gè)字符“/”將創(chuàng)建一個(gè)閉合標(biāo)簽符號(hào)，并且狀態(tài)轉(zhuǎn)移到“Tag name state”胆数，還是保持這一狀態(tài)肌蜻，直到遇到“>”。然后必尼，產(chǎn)生一個(gè)新的標(biāo)簽符號(hào)并回到“Data state”蒋搜。后面的“</html>”將和“</body>”一樣處理。
   
   
   圖10：符號(hào)化示例輸入
   樹(shù)的構(gòu)建算法 Tree construction algorithm
   在樹(shù)的構(gòu)建階段判莉，將修改以Document為根的DOM樹(shù)豆挽，將元素附加到樹(shù)上。每個(gè)由符號(hào)識(shí)別器識(shí)別生成的節(jié)點(diǎn)將會(huì)被樹(shù)構(gòu)造器進(jìn)行處理券盅，規(guī)范中定義了每個(gè)符號(hào)相對(duì)應(yīng)的Dom元素帮哈，對(duì)應(yīng)的Dom元素將會(huì)被創(chuàng)建。這些元素除了會(huì)被添加到Dom樹(shù)上锰镀，還將被添加到開(kāi)放元素堆棧中娘侍。這個(gè)堆棧用來(lái)糾正嵌套的未匹配和未閉合標(biāo)簽，這個(gè)算法也是用狀態(tài)機(jī)來(lái)描述泳炉，所有的狀態(tài)采用插入模式憾筏。
   來(lái)看一下示例中樹(shù)的創(chuàng)建過(guò)程：
   <html>
   <body>
   Hello world
   </body>
   </html>
   構(gòu)建樹(shù)這一階段的輸入是符號(hào)識(shí)別階段生成的符號(hào)序列。
   首先是“initial mode”花鹅，接收到html符號(hào)后將轉(zhuǎn)換為“before html”模式氧腰，在這個(gè)模式中對(duì)這個(gè)符號(hào)進(jìn)行再處理。此時(shí)，創(chuàng)建了一個(gè)HTMLHtmlElement元素容贝，并將其附加到根Document對(duì)象上自脯。
   狀態(tài)此時(shí)變?yōu)椤癰efore head”，接收到body符號(hào)時(shí)斤富，即使這里沒(méi)有head符號(hào)膏潮，也將自動(dòng)創(chuàng)建一個(gè)HTMLHeadElement元素并附加到樹(shù)上。
   現(xiàn)在满力，轉(zhuǎn)到“in head”模式焕参，然后是“after head”。到這里油额，body符號(hào)會(huì)被再次處理叠纷，將創(chuàng)建一個(gè)HTMLBodyElement并插入到樹(shù)中，同時(shí)潦嘶，轉(zhuǎn)移到“in body”模式涩嚣。
   然后，接收到字符串“Hello world”的字符符號(hào)掂僵，第一個(gè)字符將導(dǎo)致創(chuàng)建并插入一個(gè)text節(jié)點(diǎn)航厚，其他字符將附加到該節(jié)點(diǎn)。
   接收到body結(jié)束符號(hào)時(shí)锰蓬，轉(zhuǎn)移到“after body”模式幔睬，接著接收到html結(jié)束符號(hào)，這個(gè)符號(hào)意味著轉(zhuǎn)移到了“after after body”模式芹扭，當(dāng)接收到文件結(jié)束符時(shí)麻顶，整個(gè)解析過(guò)程結(jié)束。
   
   
   圖11：示例html樹(shù)的構(gòu)建過(guò)程
   解析結(jié)束時(shí)的處理 Action when the parsing is finished
   在這個(gè)階段舱卡，瀏覽器將文檔標(biāo)記為可交互的杏死，并開(kāi)始解析處于延時(shí)模式中的腳本——這些腳本在文檔解析后執(zhí)行汰蜘。
   文檔狀態(tài)將被設(shè)置為完成纯路，同時(shí)觸發(fā)一個(gè)load事件缤骨。
   Html5規(guī)范中有符號(hào)化及構(gòu)建樹(shù)的完整算法(http://www.w3.org/TR/html5/syntax.html#html-parser)浮禾。
   瀏覽器容錯(cuò) Browsers error tolerance
   你從來(lái)不會(huì)在一個(gè)html頁(yè)面上看到“無(wú)效語(yǔ)法”這樣的錯(cuò)誤交胚，瀏覽器修復(fù)了無(wú)效內(nèi)容并繼續(xù)工作。
   以下面這段html為例：
   <html>
   <mytag>
   </mytag>
   <div>
   <p>
   </div>
   Really lousy HTML
   </p>
   </html>
   這段html違反了很多規(guī)則（mytag不是合法的標(biāo)簽盈电，p及div錯(cuò)誤的嵌套等等）蝴簇，但是瀏覽器仍然可以沒(méi)有任何怨言的繼續(xù)顯示，它在解析的過(guò)程中修復(fù)了html作者的錯(cuò)誤匆帚。
   瀏覽器都具有錯(cuò)誤處理的能力熬词，但是，另人驚訝的是，這并不是html最新規(guī)范的內(nèi)容互拾，就像書(shū)簽及前進(jìn)后退按鈕一樣歪今，它只是瀏覽器長(zhǎng)期發(fā)展的結(jié)果。一些比較知名的非法html結(jié)構(gòu)颜矿，在許多站點(diǎn)中出現(xiàn)過(guò)寄猩，瀏覽器都試著以一種和其他瀏覽器一致的方式去修復(fù)。
   Html5規(guī)范定義了這方面的需求骑疆，webkit在html解析類開(kāi)始部分的注釋中做了很好的總結(jié)田篇。
   解析器將符號(hào)化的輸入解析為文檔并創(chuàng)建文檔，但不幸的是箍铭，我們必須處理很多沒(méi)有很好格式化的html文檔泊柬，至少要小心下面幾種錯(cuò)誤情況。
4. 在未閉合的標(biāo)簽中添加明確禁止的元素诈火。這種情況下兽赁，應(yīng)該先將前一標(biāo)簽閉合
5. 不能直接添加元素。有些人在寫文檔的時(shí)候會(huì)忘了中間一些標(biāo)簽（或者中間標(biāo)簽是可選的）冷守，比如HTML HEAD BODY TR TD LI等
6. 想在一個(gè)行內(nèi)元素中添加塊狀元素闸氮。關(guān)閉所有的行內(nèi)元素，直到下一個(gè)更高的塊狀元素
7. 如果這些都不行教沾，就閉合當(dāng)前標(biāo)簽直到可以添加該元素蒲跨。
   下面來(lái)看一些webkit容錯(cuò)的例子：
   </br>替代
   
   一些網(wǎng)站使用</br>替代
   ，為了兼容IE和Firefox授翻，webkit將其看作
   或悲。
   代碼：
   if (t->isCloseTag(brTag) && m_document->inCompatMode()) {
   reportError(MalformedBRError);
   t->beginTag = true;
   }
   Note－這里的錯(cuò)誤處理在內(nèi)部進(jìn)行，用戶看不到堪唐。
   迷路的表格
   這指一個(gè)表格嵌套在另一個(gè)表格中巡语，但不在它的某個(gè)單元格內(nèi)。
   比如下面這個(gè)例子：
   <table>
   <table>
   <tr><td>inner table</td></tr>
   </table>
   <tr><td>outer table</td></tr>
   </table>
   webkit將會(huì)將嵌套的表格變?yōu)閮蓚€(gè)兄弟表格：
   <table>
   <tr><td>outer table</td></tr>
   </table>
   <table>
   <tr><td>inner table</td></tr>
   </table>
   代碼：
   if (m_inStrayTableContent && localName == tableTag)
   popBlock(tableTag);
   webkit使用堆棧存放當(dāng)前的元素內(nèi)容淮菠，它將從外部表格的堆棧中彈出內(nèi)部的表格男公，則它們變?yōu)榱诵值鼙砀瘛?br> 嵌套的表單元素
   用戶將一個(gè)表單嵌套到另一個(gè)表單中，則第二個(gè)表單將被忽略合陵。
   代碼：
   if (!m_currentFormElement) {
   m_currentFormElement = new HTMLFormElement(formTag, m_document);
   }
   太深的標(biāo)簽繼承
   www.liceo.edu.mx是一個(gè)由嵌套層次的站點(diǎn)的例子枢赔，最多只允許20個(gè)相同類型的標(biāo)簽嵌套，多出來(lái)的將被忽略拥知。
   代碼：
   bool HTMLParser::allowNestedRedundantTag(const AtomicString& tagName)
   {
   unsigned i = 0;
   for (HTMLStackElem* curr = m_blockStack;
   i < cMaxRedundantTagDepth && curr && curr->tagName == tagName;
   curr = curr->next, i++) { }
   return i != cMaxRedundantTagDepth;
   }
   放錯(cuò)了地方的html踏拜、body閉合標(biāo)簽
   又一次不言自明。
   支持不完整的html低剔。我們從來(lái)不閉合body速梗，因?yàn)橐恍┯薮赖木W(wǎng)頁(yè)總是在還未真正結(jié)束時(shí)就閉合它肮塞。我們依賴調(diào)用end方法去執(zhí)行關(guān)閉的處理。
   代碼：
   if (t->tagName == htmlTag || t->tagName == bodyTag )
   return;
   所以姻锁，web開(kāi)發(fā)者要小心了枕赵，除非你想成為webkit容錯(cuò)代碼的范例，否則還是寫格式良好的html吧位隶。
   CSS解析 CSS parsing
   還記得簡(jiǎn)介中提到的解析的概念嗎烁设，不同于html，css屬于上下文無(wú)關(guān)文法钓试，可以用前面所描述的解析器來(lái)解析装黑。Css規(guī)范定義了css的詞法及語(yǔ)法文法。
   看一些例子：
   每個(gè)符號(hào)都由正則表達(dá)式定義了詞法文法（詞匯表）：
   comment ///[^]/+([^/*][]/+)//
   num [0-9]+|[0-9]”.”[0-9]+
   nonascii [/200-/377]
   nmstart [_a-z]|{nonascii}|{escape}
   nmchar [_a-z0-9-]|{nonascii}|{escape}
   name {nmchar}+
   ident {nmstart}{nmchar}
   “ident”是識(shí)別器的縮寫弓熏，相當(dāng)于一個(gè)class名恋谭，“name”是一個(gè)元素id（用“＃”引用）挽鞠。
   語(yǔ)法用BNF進(jìn)行描述：
   ruleset
   : selector [ ',' S* selector ]*
   ‘{’ S* declaration [ ';' S* declaration ]* ‘}’ S*
   ;
   selector
   : simple_selector [ combinator selector | S+ [ combinator selector ] ]
   ;
   simple_selector
   : element_name [ HASH | class | attrib | pseudo ]*
   | [ HASH | class | attrib | pseudo ]+
   ;
   class
   : ‘.’ IDENT
   ;
   element_name
   : IDENT | ‘’
   ;
   attrib
   : ‘[' S IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S*
   [ IDENT | STRING ] S* ] ‘]’
   ;
   pseudo
   : ‘:’ [ IDENT | FUNCTION S* [IDENT S] ‘)’ ]
   ;
   說(shuō)明：一個(gè)規(guī)則集合有這樣的結(jié)構(gòu)
   div.error , a.error {
   color:red;
   font-weight:bold;
   }
   div.error和a.error時(shí)選擇器疚颊，大括號(hào)中的內(nèi)容包含了這條規(guī)則集合中的規(guī)則，這個(gè)結(jié)構(gòu)在下面的定義中正式的定義了：
   ruleset
   : selector [ ',' S selector ]*
   ‘{’ S* declaration [ ';' S* declaration ]* ‘}’ S*
   ;
   這說(shuō)明信认，一個(gè)規(guī)則集合具有一個(gè)或是可選個(gè)數(shù)的多個(gè)選擇器材义，這些選擇器以逗號(hào)和空格（S表示空格）進(jìn)行分隔。每個(gè)規(guī)則集合包含大括號(hào)及大括號(hào)中的一條或多條以分號(hào)隔開(kāi)的聲明嫁赏。聲明和選擇器在后面進(jìn)行定義其掂。
   Webkit CSS 解析器 Webkit CSS parser
   Webkit使用Flex和Bison解析生成器從CSS語(yǔ)法文件中自動(dòng)生成解析器×视回憶一下解析器的介紹款熬，Bison創(chuàng)建一個(gè)自底向上的解析器，F(xiàn)irefox使用自頂向下解析器攘乒。它們都是將每個(gè)css文件解析為樣式表對(duì)象贤牛，每個(gè)對(duì)象包含css規(guī)則，css規(guī)則對(duì)象包含選擇器和聲明對(duì)象则酝，以及其他一些符合css語(yǔ)法的對(duì)象殉簸。
   
   
   圖12：解析css
   腳本解析 Parsing scripts
   本章將介紹JavaScript。
   處理腳本及樣式表的順序 The order of processing scripts and style sheets
   腳本
   web的模式是同步的沽讹，開(kāi)發(fā)者希望解析到一個(gè)script標(biāo)簽時(shí)立即解析執(zhí)行腳本般卑，并阻塞文檔的解析直到腳本執(zhí)行完。如果腳本是外引的妥泉，則網(wǎng)絡(luò)必須先請(qǐng)求到這個(gè)資源——這個(gè)過(guò)程也是同步的椭微，會(huì)阻塞文檔的解析直到資源被請(qǐng)求到。這個(gè)模式保持了很多年盲链，并且在html4及html5中都特別指定了。開(kāi)發(fā)者可以將腳本標(biāo)識(shí)為defer，以使其不阻塞文檔解析刽沾，并在文檔解析結(jié)束后執(zhí)行本慕。Html5增加了標(biāo)記腳本為異步的選項(xiàng)，以使腳本的解析執(zhí)行使用另一個(gè)線程侧漓。
   預(yù)解析 Speculative parsing
   Webkit和Firefox都做了這個(gè)優(yōu)化锅尘，當(dāng)執(zhí)行腳本時(shí)，另一個(gè)線程解析剩下的文檔布蔗，并加載后面需要通過(guò)網(wǎng)絡(luò)加載的資源藤违。這種方式可以使資源并行加載從而使整體速度更快。需要注意的是纵揍，預(yù)解析并不改變Dom樹(shù)顿乒，它將這個(gè)工作留給主解析過(guò)程，自己只解析外部資源的引用泽谨，比如外部腳本璧榄、樣式表及圖片。
   樣式表 Style sheets
   樣式表采用另一種不同的模式吧雹。理論上骨杂，既然樣式表不改變Dom樹(shù)，也就沒(méi)有必要停下文檔的解析等待它們雄卷，然而搓蚪，存在一個(gè)問(wèn)題，腳本可能在文檔的解析過(guò)程中請(qǐng)求樣式信息丁鹉，如果樣式還沒(méi)有加載和解析陕凹，腳本將得到錯(cuò)誤的值，顯然這將會(huì)導(dǎo)致很多問(wèn)題鳄炉，這看起來(lái)是個(gè)邊緣情況杜耙，但確實(shí)很常見(jiàn)。Firefox在存在樣式表還在加載和解析時(shí)阻塞所有的腳本拂盯，而chrome只在當(dāng)腳本試圖訪問(wèn)某些可能被未加載的樣式表所影響的特定的樣式屬性時(shí)才阻塞這些腳本佑女。
   渲染樹(shù)的構(gòu)造 Render tree construction
   當(dāng)Dom樹(shù)構(gòu)建完成時(shí)，瀏覽器開(kāi)始構(gòu)建另一棵樹(shù)——渲染樹(shù)谈竿。渲染樹(shù)由元素顯示序列中的可見(jiàn)元素組成团驱，它是文檔的可視化表示，構(gòu)建這棵樹(shù)是為了以正確的順序繪制文檔內(nèi)容空凸。
   Firefox將渲染樹(shù)中的元素稱為frames嚎花，webkit則用renderer或渲染對(duì)象來(lái)描述這些元素。
   一個(gè)渲染對(duì)象直到怎么布局及繪制自己及它的children呀洲。
   RenderObject是Webkit的渲染對(duì)象基類紊选，它的定義如下：
   class RenderObject{
   virtual void layout();
   virtual void paint(PaintInfo);
   virtual void rect repaintRect();
   Node* node; //the DOM node
   RenderStyle* style; // the computed style
   RenderLayer* containgLayer; //the containing z-index layer
   }
   每個(gè)渲染對(duì)象用一個(gè)和該節(jié)點(diǎn)的css盒模型相對(duì)應(yīng)的矩形區(qū)域來(lái)表示啼止，正如css2所描述的那樣，它包含諸如寬兵罢、高和位置之類的幾何信息献烦。盒模型的類型受該節(jié)點(diǎn)相關(guān)的display樣式屬性的影響（參考樣式計(jì)算章節(jié)）。下面的webkit代碼說(shuō)明了如何根據(jù)display屬性決定某個(gè)節(jié)點(diǎn)創(chuàng)建何種類型的渲染對(duì)象卖词。
   RenderObject* RenderObject::createObject(Node* node, RenderStyle* style)
   {
   Document* doc = node->document();
   RenderArena* arena = doc->renderArena();
   …
   RenderObject* o = 0;
   switch (style->display()) {
   case NONE:
   break;
   case INLINE:
   o = new (arena) RenderInline(node);
   break;
   case BLOCK:
   o = new (arena) RenderBlock(node);
   break;
   case INLINE_BLOCK:
   o = new (arena) RenderBlock(node);
   break;
   case LIST_ITEM:
   o = new (arena) RenderListItem(node);
   break;
   …
   }
   return o;
   }
   元素的類型也需要考慮巩那，例如，表單控件和表格帶有特殊的框架此蜈。
   在webkit中即横，如果一個(gè)元素想創(chuàng)建一個(gè)特殊的渲染對(duì)象，它需要復(fù)寫“createRenderer”方法裆赵，使渲染對(duì)象指向不包含幾何信息的樣式對(duì)象东囚。
   渲染樹(shù)和Dom樹(shù)的關(guān)系 The render tree relation to the DOM tree
   渲染對(duì)象和Dom元素相對(duì)應(yīng)，但這種對(duì)應(yīng)關(guān)系不是一對(duì)一的顾瞪，不可見(jiàn)的Dom元素不會(huì)被插入渲染樹(shù)舔庶，例如head元素。另外陈醒，display屬性為none的元素也不會(huì)在渲染樹(shù)中出現(xiàn)（visibility屬性為hidden的元素將出現(xiàn)在渲染樹(shù)中）惕橙。
   還有一些Dom元素對(duì)應(yīng)幾個(gè)可見(jiàn)對(duì)象，它們一般是一些具有復(fù)雜結(jié)構(gòu)的元素钉跷，無(wú)法用一個(gè)矩形來(lái)描述弥鹦。例如，select元素有三個(gè)渲染對(duì)象——一個(gè)顯示區(qū)域爷辙、一個(gè)下拉列表及一個(gè)按鈕彬坏。同樣，當(dāng)文本因?yàn)閷挾炔粔蚨坌袝r(shí)膝晾，新行將作為額外的渲染元素被添加栓始。另一個(gè)多個(gè)渲染對(duì)象的例子是不規(guī)范的html，根據(jù)css規(guī)范血当，一個(gè)行內(nèi)元素只能僅包含行內(nèi)元素或僅包含塊狀元素幻赚，在存在混合內(nèi)容時(shí)，將會(huì)創(chuàng)建匿名的塊狀渲染對(duì)象包裹住行內(nèi)元素臊旭。
   一些渲染對(duì)象和所對(duì)應(yīng)的Dom節(jié)點(diǎn)不在樹(shù)上相同的位置落恼，例如，浮動(dòng)和絕對(duì)定位的元素在文本流之外离熏，在兩棵樹(shù)上的位置不同佳谦，渲染樹(shù)上標(biāo)識(shí)出真實(shí)的結(jié)構(gòu)，并用一個(gè)占位結(jié)構(gòu)標(biāo)識(shí)出它們?cè)瓉?lái)的位置滋戳。
   
   
   圖12：渲染樹(shù)及對(duì)應(yīng)的Dom樹(shù)
   創(chuàng)建樹(shù)的流程 The flow of constructing the tree
   Firefox中钻蔑，表述為一個(gè)監(jiān)聽(tīng)Dom更新的監(jiān)聽(tīng)器啥刻，將frame的創(chuàng)建委派給Frame Constructor，這個(gè)構(gòu)建器計(jì)算樣式（參看樣式計(jì)算）并創(chuàng)建一個(gè)frame矢棚。
   Webkit中郑什，計(jì)算樣式并生成渲染對(duì)象的過(guò)程稱為attachment府喳，每個(gè)Dom節(jié)點(diǎn)有一個(gè)attach方法蒲肋，attachment的過(guò)程是同步的，調(diào)用新節(jié)點(diǎn)的attach方法將節(jié)點(diǎn)插入到Dom樹(shù)中钝满。
   處理html和body標(biāo)簽將構(gòu)建渲染樹(shù)的根兜粘，這個(gè)根渲染對(duì)象對(duì)應(yīng)被css規(guī)范稱為containing block的元素——包含了其他所有塊元素的頂級(jí)塊元素。它的大小就是viewport——瀏覽器窗口的顯示區(qū)域弯蚜，F(xiàn)irefox稱它為viewPortFrame孔轴，webkit稱為RenderView，這個(gè)就是文檔所指向的渲染對(duì)象碎捺，樹(shù)中其他的部分都將作為一個(gè)插入的Dom節(jié)點(diǎn)被創(chuàng)建路鹰。
   樣式計(jì)算 Style Computation
   創(chuàng)建渲染樹(shù)需要計(jì)算出每個(gè)渲染對(duì)象的可視屬性，這可以通過(guò)計(jì)算每個(gè)元素的樣式屬性得到收厨。
   樣式包括各種來(lái)源的樣式表晋柱，行內(nèi)樣式元素及html中的可視化屬性（例如bgcolor），可視化屬性轉(zhuǎn)化為css樣式屬性诵叁。
   樣式表來(lái)源于瀏覽器默認(rèn)樣式表雁竞，及頁(yè)面作者和用戶提供的樣式表——有些樣式是瀏覽器用戶提供的（瀏覽器允許用戶定義喜歡的樣式，例如拧额，在Firefox中碑诉，可以通過(guò)在Firefox Profile目錄下放置樣式表實(shí)現(xiàn)）。
   計(jì)算樣式的一些困難：
8. 樣式數(shù)據(jù)是非常大的結(jié)構(gòu)侥锦，保存大量的樣式屬性會(huì)帶來(lái)內(nèi)存問(wèn)題
9. 如果不進(jìn)行優(yōu)化进栽，找到每個(gè)元素匹配的規(guī)則會(huì)導(dǎo)致性能問(wèn)題，為每個(gè)元素查找匹配的規(guī)則都需要遍歷整個(gè)規(guī)則表恭垦，這個(gè)過(guò)程有很大的工作量快毛。選擇符可能有復(fù)雜的結(jié)構(gòu)，匹配過(guò)程如果沿著一條開(kāi)始看似正確署照，后來(lái)卻被證明是無(wú)用的路徑祸泪，則必須去嘗試另一條路徑。
   例如建芙，下面這個(gè)復(fù)雜選擇符
   div div div div｛…｝
   這意味著規(guī)則應(yīng)用到三個(gè)div的后代div元素没隘，選擇樹(shù)上一條特定的路徑去檢查，這可能需要遍歷節(jié)點(diǎn)樹(shù)禁荸，最后卻發(fā)現(xiàn)它只是兩個(gè)div的后代右蒲，并不使用該規(guī)則阀湿，然后則需要沿著另一條路徑去嘗試
10. 應(yīng)用規(guī)則涉及非常復(fù)雜的級(jí)聯(lián)，它們定義了規(guī)則的層次
    我們來(lái)看一下瀏覽器如何處理這些問(wèn)題：
    共享樣式數(shù)據(jù)
    webkit節(jié)點(diǎn)引用樣式對(duì)象（渲染樣式）瑰妄，某些情況下陷嘴，這些對(duì)象可以被節(jié)點(diǎn)間共享，這些節(jié)點(diǎn)需要是兄弟或是表兄弟節(jié)點(diǎn)间坐，并且：
    這些元素必須處于相同的鼠標(biāo)狀態(tài)（比如不能一個(gè)處于hover灾挨，而另一個(gè)不是）
    不能有元素具有id
    標(biāo)簽名必須匹配
    class屬性必須匹配
    對(duì)應(yīng)的屬性必須相同
    鏈接狀態(tài)必須匹配
    焦點(diǎn)狀態(tài)必須匹配
    不能有元素被屬性選擇器影響
    元素不能有行內(nèi)樣式屬性
    不能有生效的兄弟選擇器，webcore在任何兄弟選擇器相遇時(shí)只是簡(jiǎn)單的拋出一個(gè)全局轉(zhuǎn)換竹宋，并且在它們顯示時(shí)使整個(gè)文檔的樣式共享失效劳澄，這些包括＋選擇器和類似:first-child和:last-child這樣的選擇器。

Firefox規(guī)則樹(shù) Firefox rule tree
Firefox用兩個(gè)樹(shù)用來(lái)簡(jiǎn)化樣式計(jì)算－規(guī)則樹(shù)和樣式上下文樹(shù)蜈七，webkit也有樣式對(duì)象秒拔，但它們并沒(méi)有存儲(chǔ)在類似樣式上下文樹(shù)這樣的樹(shù)中，只是由Dom節(jié)點(diǎn)指向其相關(guān)的樣式飒硅。

1. div {margin:5px;color:black}
2. .err {color:red}
3. .big {margin-top:3px}
4. div span {margin-bottom:4px}

5. div1 {color:blue}

6. div2 {color:green}

簡(jiǎn)化下問(wèn)題蛤签，我們只填充兩個(gè)結(jié)構(gòu)——color和margin辞友，color結(jié)構(gòu)只包含一個(gè)成員－顏色，margin結(jié)構(gòu)包含四邊顷啼。
生成的規(guī)則樹(shù)如下（節(jié)點(diǎn)名：指向的規(guī)則）

messageDiv {height:50px}

div {margin:5px}
第一條規(guī)則將被插入class映射儡湾，第二條插入id映射特恬，第三條是標(biāo)簽映射。
下面這個(gè)html片段：
<p class=”error”>an error occurred </p>
<div id=” messageDiv”>this is a message</div>
我們首先找到p元素對(duì)應(yīng)的規(guī)則徐钠，class映射將包含一個(gè)“error”的key癌刽，找到p.error的規(guī)則，div在id映射和標(biāo)簽映射中都有相關(guān)的規(guī)則，剩下的工作就是找出這些由key對(duì)應(yīng)的規(guī)則中哪些確實(shí)是正確匹配的显拜。
例如衡奥，如果div的規(guī)則是
table div {margin:5px}
這也是標(biāo)簽映射產(chǎn)生的，因?yàn)閗ey是最右邊的選擇符远荠，但它并不匹配這里的div元素杰赛，因?yàn)檫@里的div沒(méi)有table祖先。
Webkit和Firefox都會(huì)做這個(gè)處理矮台。
以正確的級(jí)聯(lián)順序應(yīng)用規(guī)則
樣式對(duì)象擁有對(duì)應(yīng)所有可見(jiàn)屬性的屬性乏屯，如果特性沒(méi)有被任何匹配的規(guī)則所定義，那么一些特性可以從parent的樣式對(duì)象中繼承瘦赫，另外一些使用默認(rèn)值辰晕。
這個(gè)問(wèn)題的產(chǎn)生是因?yàn)榇嬖诓恢挂惶幍亩x，這里用級(jí)聯(lián)順序解決這個(gè)問(wèn)題确虱。
樣式表的級(jí)聯(lián)順序
一個(gè)樣式屬性的聲明可能在幾個(gè)樣式表中出現(xiàn)含友，或是在一個(gè)樣式表中出現(xiàn)多次，因此校辩，應(yīng)用規(guī)則的順序至關(guān)重要窘问，這個(gè)順序就是級(jí)聯(lián)順序。根據(jù)css2的規(guī)范宜咒，級(jí)聯(lián)順序?yàn)椋◤牡偷礁撸?/p>

1. 瀏覽器聲明
2. 用戶聲明
3. 作者的一般聲明
4. 作者的important聲明
5. 用戶important聲明
   瀏覽器聲明是最不重要的惠赫，用戶只有在聲明被標(biāo)記為important時(shí)才會(huì)覆蓋作者的聲明。具有同等級(jí)別的聲明將根據(jù)specifity以及它們被定義時(shí)的順序進(jìn)行排序故黑。Html可視化屬性將被轉(zhuǎn)換為匹配的css聲明儿咱，它們被視為最低優(yōu)先級(jí)的作者規(guī)則。
   Specifity
   Css2規(guī)范中定義的選擇符specifity如下：
   · 如果聲明來(lái)自style屬性场晶，而不是一個(gè)選擇器的規(guī)則混埠，則計(jì)1，否則計(jì)0（＝a）
   · 計(jì)算選擇器中id屬性的數(shù)量（＝b）
   · 計(jì)算選擇器中class及偽類的數(shù)量（＝c）
   · 計(jì)算選擇器中元素名及偽元素的數(shù)量（＝d）
   連接a－b－c－d四個(gè)數(shù)量（用一個(gè)大基數(shù)的計(jì)算系統(tǒng)）將得到specifity诗轻。這里使用的基數(shù)由分類中最高的基數(shù)定義钳宪。例如，如果a為14扳炬，可以使用16進(jìn)制吏颖。不同情況下，a為17時(shí)鞠柄，則需要使用阿拉伯?dāng)?shù)字17作為基數(shù)侦高，這種情況可能在這個(gè)選擇符時(shí)發(fā)生html body div div …（選擇符中有17個(gè)標(biāo)簽，一般不太可能）厌杜。
   一些例子：

• {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 /
  li {} / a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 /
  li:first-line {} / a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 /
  ul li {} / a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 /
  ul ol+li {} / a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
  h1 + [rel=up]{} / a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 /
  ul ol li.red {} / a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 /
  li.red.level {} / a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */

x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */

style=”" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
規(guī)則排序
規(guī)則匹配后奉呛，需要根據(jù)級(jí)聯(lián)順序?qū)σ?guī)則進(jìn)行排序计螺，webkit先將小列表用冒泡排序，再將它們合并為一個(gè)大列表瞧壮，webkit通過(guò)為規(guī)則復(fù)寫“>”操作來(lái)執(zhí)行排序：
static bool operator >(CSSRuleData& r1, CSSRuleData& r2)
{
int spec1 = r1.selector()->specificity();
int spec2 = r2.selector()->specificity();
return (spec1 == spec2) : r1.position() > r2.position() : spec1 > spec2;
}
逐步處理 Gradual process
webkit使用一個(gè)標(biāo)志位標(biāo)識(shí)所有頂層樣式表都已加載登馒，如果在attch時(shí)樣式?jīng)]有完全加載，則放置占位符咆槽，并在文檔中標(biāo)記陈轿，一旦樣式表完成加載就重新進(jìn)行計(jì)算。
布局 Layout
當(dāng)渲染對(duì)象被創(chuàng)建并添加到樹(shù)中秦忿，它們并沒(méi)有位置和大小麦射，計(jì)算這些值的過(guò)程稱為layout或reflow。
Html使用基于流的布局模型灯谣，意味著大部分時(shí)間潜秋，可以以單一的途徑進(jìn)行幾何計(jì)算。流中靠后的元素并不會(huì)影響前面元素的幾何特性胎许，所以布局可以在文檔中從右向左峻呛、自上而下的進(jìn)行。也存在一些例外辜窑，比如html tables钩述。
坐標(biāo)系統(tǒng)相對(duì)于根frame，使用top和left坐標(biāo)穆碎。
布局是一個(gè)遞歸的過(guò)程牙勘，由根渲染對(duì)象開(kāi)始，它對(duì)應(yīng)html文檔元素惨远，布局繼續(xù)遞歸的通過(guò)一些或所有的frame層級(jí)谜悟，為每個(gè)需要幾何信息的渲染對(duì)象進(jìn)行計(jì)算。
根渲染對(duì)象的位置是0,0北秽，它的大小是viewport－瀏覽器窗口的可見(jiàn)部分。
所有的渲染對(duì)象都有一個(gè)layout或reflow方法最筒，每個(gè)渲染對(duì)象調(diào)用需要布局的children的layout方法贺氓。
Dirty bit 系統(tǒng)
為了不因?yàn)槊總€(gè)小變化都全部重新布局，瀏覽器使用一個(gè)dirty bit系統(tǒng)床蜘，一個(gè)渲染對(duì)象發(fā)生了變化或是被添加了辙培，就標(biāo)記它及它的children為dirty－需要layout。存在兩個(gè)標(biāo)識(shí)－dirty及children are dirty邢锯，children are dirty說(shuō)明即使這個(gè)渲染對(duì)象可能沒(méi)問(wèn)題扬蕊，但它至少有一個(gè)child需要layout。
全局和增量 layout
當(dāng)layout在整棵渲染樹(shù)觸發(fā)時(shí)丹擎，稱為全局layout尾抑，這可能在下面這些情況下發(fā)生：

1. 一個(gè)全局的樣式改變影響所有的渲染對(duì)象歇父，比如字號(hào)的改變

2. 窗口resize
   layout也可以是增量的，這樣只有標(biāo)志為dirty的渲染對(duì)象會(huì)重新布局（也將導(dǎo)致一些額外的布局）再愈。增量 layout會(huì)在渲染對(duì)象dirty時(shí)異步觸發(fā)榜苫，例如，當(dāng)網(wǎng)絡(luò)接收到新的內(nèi)容并添加到Dom樹(shù)后翎冲，新的渲染對(duì)象會(huì)添加到渲染樹(shù)中垂睬。

   
   
   
   

   圖20：增量 layout
   異步和同步layout
   增量layout的過(guò)程是異步的，F(xiàn)irefox為增量layout生成了reflow隊(duì)列抗悍，以及一個(gè)調(diào)度執(zhí)行這些批處理命令驹饺。Webkit也有一個(gè)計(jì)時(shí)器用來(lái)執(zhí)行增量layout－遍歷樹(shù)，為dirty狀態(tài)的渲染對(duì)象重新布局缴渊。
   另外赏壹，當(dāng)腳本請(qǐng)求樣式信息時(shí)，例如“offsetHeight”疟暖，會(huì)同步的觸發(fā)增量布局卡儒。
   全局的layout一般都是同步觸發(fā)。
   有些時(shí)候俐巴，layout會(huì)被作為一個(gè)初始layout之后的回調(diào)骨望，比如滑動(dòng)條的滑動(dòng)。
   優(yōu)化
   當(dāng)一個(gè)layout因?yàn)閞esize或是渲染位置改變（并不是大小改變）而觸發(fā)時(shí)欣舵，渲染對(duì)象的大小將會(huì)從緩存中讀取擎鸠，而不會(huì)重新計(jì)算。
   一般情況下缘圈，如果只有子樹(shù)發(fā)生改變劣光，則layout并不從根開(kāi)始。這種情況發(fā)生在糟把，變化發(fā)生在元素自身并且不影響它周圍元素绢涡，例如，將文本插入文本域（否則遣疯，每次擊鍵都將觸發(fā)從根開(kāi)始的重排）雄可。
   layout過(guò)程
   layout一般有下面這幾個(gè)部分：

3. parent渲染對(duì)象決定它的寬度
4. parent渲染對(duì)象讀取chilidren，并：
5. 放置child渲染對(duì)象（設(shè)置它的x和y）
6. 在需要時(shí)（它們當(dāng)前為dirty或是處于全局layout或者其他原因）調(diào)用child渲染對(duì)象的layout缠犀，這將計(jì)算child的高度
7. parent渲染對(duì)象使用child渲染對(duì)象的累積高度数苫，以及margin和padding的高度來(lái)設(shè)置自己的高度－這將被parent渲染對(duì)象的parent使用
8. 將dirty標(biāo)識(shí)設(shè)置為false
   Firefox使用一個(gè)“state”對(duì)象（nsHTMLReflowState）做為參數(shù)去布局（firefox稱為reflow），state包含parent的寬度及其他內(nèi)容辨液。
   Firefox布局的輸出是一個(gè)“metrics”對(duì)象（nsHTMLReflowMetrics）虐急。它包括渲染對(duì)象計(jì)算出的高度。
   寬度計(jì)算
   渲染對(duì)象的寬度使用容器的寬度滔迈、渲染對(duì)象樣式中的寬度及margin止吁、border進(jìn)行計(jì)算被辑。例如，下面這個(gè)div的寬度：
   <div style=”width:30%”/>
   webkit中寬度的計(jì)算過(guò)程是（RenderBox類的calcWidth方法）：
   · 容器的寬度是容器的可用寬度和0中的最大值赏殃，這里的可用寬度為：contentWidth=clientWidth()-paddingLeft()-paddingRight()敷待，clientWidth和clientHeight代表一個(gè)對(duì)象內(nèi)部的不包括border和滑動(dòng)條的大小
   · 元素的寬度指樣式屬性width的值，它可以通過(guò)計(jì)算容器的百分比得到一個(gè)絕對(duì)值
   · 加上水平方向上的border和padding
   到這里是最佳寬度的計(jì)算過(guò)程仁热，現(xiàn)在計(jì)算寬度的最大值和最小值榜揖，如果最佳寬度大于最大寬度則使用最大寬度，如果小于最小寬度則使用最小寬度抗蠢。最后緩存這個(gè)值举哟，當(dāng)需要layout但寬度未改變時(shí)使用。
   Line breaking
   當(dāng)一個(gè)渲染對(duì)象在布局過(guò)程中需要折行時(shí)迅矛，則暫停并告訴它的parent它需要折行妨猩，parent將創(chuàng)建額外的渲染對(duì)象并調(diào)用它們的layout。
   繪制 Painting
   繪制階段秽褒，遍歷渲染樹(shù)并調(diào)用渲染對(duì)象的paint方法將它們的內(nèi)容顯示在屏幕上壶硅，繪制使用UI基礎(chǔ)組件，這在UI的章節(jié)有更多的介紹销斟。
   全局和增量
   和布局一樣庐椒，繪制也可以是全局的－繪制完整的樹(shù)－或增量的。在增量的繪制過(guò)程中蚂踊，一些渲染對(duì)象以不影響整棵樹(shù)的方式改變约谈，改變的渲染對(duì)象使其在屏幕上的矩形區(qū)域失效，這將導(dǎo)致操作系統(tǒng)將其看作dirty區(qū)域犁钟，并產(chǎn)生一個(gè)paint事件棱诱，操作系統(tǒng)很巧妙的處理這個(gè)過(guò)程，并將多個(gè)區(qū)域合并為一個(gè)涝动。Chrome中迈勋，這個(gè)過(guò)程更復(fù)雜些，因?yàn)殇秩緦?duì)象在不同的進(jìn)程中醋粟，而不是在主進(jìn)程中粪躬。Chrome在一定程度上模擬操作系統(tǒng)的行為，表現(xiàn)為監(jiān)聽(tīng)事件并派發(fā)消息給渲染根昔穴，在樹(shù)中查找到相關(guān)的渲染對(duì)象，重繪這個(gè)對(duì)象（往往還包括它的children）提前。
   繪制順序
   css2定義了繪制過(guò)程的順序－http://www.w3.org/TR/CSS21/zindex.html吗货。這個(gè)就是元素壓入堆棧的順序，這個(gè)順序影響著繪制狈网，堆棧從后向前進(jìn)行繪制宙搬。
   一個(gè)塊渲染對(duì)象的堆棧順序是：
9. 背景色
10. 背景圖
11. border
12. children
13. outline
    Firefox顯示列表
    Firefox讀取渲染樹(shù)并為繪制的矩形創(chuàng)建一個(gè)顯示列表笨腥，該列表以正確的繪制順序包含這個(gè)矩形相關(guān)的渲染對(duì)象。
    用這樣的方法勇垛，可以使重繪時(shí)只需查找一次樹(shù)脖母，而不需要多次查找——繪制所有的背景、所有的圖片闲孤、所有的border等等谆级。
    Firefox優(yōu)化了這個(gè)過(guò)程，它不添加會(huì)被隱藏的元素讼积，比如元素完全在其他不透明元素下面肥照。
    Webkit矩形存儲(chǔ)
    重繪前，webkit將舊的矩形保存為位圖勤众，然后只繪制新舊矩形的差集舆绎。
    動(dòng)態(tài)變化
    瀏覽器總是試著以最小的動(dòng)作響應(yīng)一個(gè)變化，所以一個(gè)元素顏色的變化將只導(dǎo)致該元素的重繪们颜，元素位置的變化將大致元素的布局和重繪吕朵，添加一個(gè)Dom節(jié)點(diǎn)，也會(huì)大致這個(gè)元素的布局和重繪窥突。一些主要的變化努溃，比如增加html元素的字號(hào)，將會(huì)導(dǎo)致緩存失效波岛，從而引起整數(shù)的布局和重繪茅坛。
    渲染引擎的線程
    渲染引擎是單線程的，除了網(wǎng)絡(luò)操作以外则拷，幾乎所有的事情都在單一的線程中處理贡蓖，在Firefox和Safari中，這是瀏覽器的主線程煌茬，Chrome中這是tab的主線程斥铺。
    網(wǎng)絡(luò)操作由幾個(gè)并行線程執(zhí)行，并行連接的個(gè)數(shù)是受限的（通常是2－6個(gè)）坛善。
    事件循環(huán)
    瀏覽器主線程是一個(gè)事件循環(huán)晾蜘，它被設(shè)計(jì)為無(wú)限循環(huán)以保持執(zhí)行過(guò)程的可用，等待事件（例如layout和paint事件）并執(zhí)行它們眠屎。下面是Firefox的主要事件循環(huán)代碼剔交。
    while (!mExiting)
    NS_ProcessNextEvent(thread);
    CSS2 可視模型 CSS2 visual module
    畫(huà)布 The Canvas
    根據(jù)CSS2規(guī)范，術(shù)語(yǔ)canvas用來(lái)描述格式化的結(jié)構(gòu)所渲染的空間——瀏覽器繪制內(nèi)容的地方改衩。畫(huà)布對(duì)每個(gè)維度空間都是無(wú)限大的岖常，但瀏覽器基于viewport的大小選擇了一個(gè)初始寬度。
    根據(jù)http://www.w3.org/TR/CSS2/zindex.html的定義葫督，畫(huà)布如果是包含在其他畫(huà)布內(nèi)則是透明的竭鞍，否則瀏覽器會(huì)指定一個(gè)顏色板惑。
    CSS盒模型
    CSS盒模型描述了矩形盒，這些矩形盒是為文檔樹(shù)中的元素生成的偎快，并根據(jù)可視的格式化模型進(jìn)行布局冯乘。每個(gè)box包括內(nèi)容區(qū)域（如圖片、文本等）及可選的四周padding晒夹、border和margin區(qū)域裆馒。
    
    
    每個(gè)節(jié)點(diǎn)生成0－n個(gè)這樣的box。
    所有的元素都有一個(gè)display屬性惋戏，用來(lái)決定它們生成box的類型领追，例如：
    block－生成塊狀box
    inline－生成一個(gè)或多個(gè)行內(nèi)box
    none－不生成box
    默認(rèn)的是inline，但瀏覽器樣式表設(shè)置了其他默認(rèn)值响逢，例如绒窑，div元素默認(rèn)為block√蛲ぃ可以訪問(wèn)http://www.w3.org/TR/CSS2/sample.html查看更多的默認(rèn)樣式表示例些膨。
    定位策略 Position scheme
    這里有三種策略：
14. normal－對(duì)象根據(jù)它在文檔的中位置定位，這意味著它在渲染樹(shù)和在Dom樹(shù)中位置一致钦铺，并根據(jù)它的盒模型和大小進(jìn)行布局
15. float－對(duì)象先像普通流一樣布局订雾，然后盡可能的向左或是向右移動(dòng)
16. absolute－對(duì)象在渲染樹(shù)中的位置和Dom樹(shù)中位置無(wú)關(guān)
    static和relative是normal，absolute和fixed屬于absolute矛洞。
    在static定位中洼哎，不定義位置而使用默認(rèn)的位置。其他策略中沼本，作者指定位置——top噩峦、bottom、left抽兆、right识补。
    Box布局的方式由這幾項(xiàng)決定：box的類型、box的大小辫红、定位策略及擴(kuò)展信息（比如圖片大小和屏幕尺寸）凭涂。
    Box類型
    Block box：構(gòu)成一個(gè)塊，即在瀏覽器窗口上有自己的矩形
    
    
    Inline box：并沒(méi)有自己的塊狀區(qū)域贴妻，但包含在一個(gè)塊狀區(qū)域內(nèi)
    
    
    block一個(gè)挨著一個(gè)垂直格式化切油，inline則在水平方向上格式化。
    
    
    Inline盒模型放置在行內(nèi)或是line box中名惩，每行至少和最高的box一樣高白翻，當(dāng)box以baseline對(duì)齊時(shí)——即一個(gè)元素的底部和另一個(gè)box上除底部以外的某點(diǎn)對(duì)齊，行高可以比最高的box高。當(dāng)容器寬度不夠時(shí)滤馍，行內(nèi)元素將被放到多行中，這在一個(gè)p元素中經(jīng)常發(fā)生底循。
    
    
    定位 Position
    Relative
    相對(duì)定位——先按照一般的定位巢株，然后按所要求的差值移動(dòng)。
    
    
    Floats
    一個(gè)浮動(dòng)的box移動(dòng)到一行的最左邊或是最右邊熙涤，其余的box圍繞在它周圍阁苞。下面這段html：
    <p>
    <img style=”float:right” src=”images/image.gif” width=”100″ height=”100″>Lorem ipsum dolor sit amet, consectetuer…
    </p>
    將顯示為：
    
    
    Absolute和Fixed
    這種情況下的布局完全不顧普通的文檔流，元素不屬于文檔流的一部分祠挫，大小取決于容器那槽。Fixed時(shí)，容器為viewport（可視區(qū)域）等舔。
    
    
    圖17：fixed
    注意－fixed即使在文檔流滾動(dòng)時(shí)也不會(huì)移動(dòng)骚灸。
    Layered representation
    這個(gè)由CSS屬性中的z-index指定，表示盒模型的第三個(gè)大小慌植，即在z軸上的位置甚牲。Box分發(fā)到堆棧中（稱為堆棧上下文），每個(gè)堆棧中靠后的元素將被較早繪制蝶柿，棧頂靠前的元素離用戶最近丈钙，當(dāng)發(fā)生交疊時(shí)，將隱藏靠后的元素交汤。堆棧根據(jù)z-index屬性排序雏赦，擁有z-index屬性的box形成了一個(gè)局部堆棧，viewport有外部堆棧芙扎，例如：
    <STYLE type=”text/css”>
    div {
    position: absolute;
    left: 2in;
    top: 2in;
    }
    </STYLE>
    <P>
    <DIV
    style=”z-index: 3;background-color:red; width: 1in; height: 1in; “>
    </DIV>
    <DIV
    style=”z-index: 1;background-color:green;width: 2in; height: 2in;”>
    </DIV>
    </p>
    結(jié)果是：
    
    
    雖然綠色div排在紅色div后面星岗，可能在正常流中也已經(jīng)被繪制在后面，但z-index有更高優(yōu)先級(jí)纵顾，所以在根box的堆棧中更靠前伍茄。
    國(guó)外也有網(wǎng)友根據(jù)瀏覽器的工作原理繪制了幾張工作流程圖，方便大家通過(guò)簡(jiǎn)易的圖片來(lái)了解這個(gè)辛苦的過(guò)程：
    
    瀏覽器工作原理
    
    原文：http://taligarsiel.com/Projects/howbrowserswork1.htm編譯：zzzaquarius

版權(quán)聲明：轉(zhuǎn)載時(shí)請(qǐng)以超鏈接形式標(biāo)明文章原始出處和作者信息及本聲明