一姜挺、介紹
瀏覽器可以被認(rèn)為是使用最廣泛的軟件盐类，本文將介紹瀏覽器的工作原理，我們將看到寓落，從你在地址欄輸入google.com到你看到google主頁(yè)過程中都發(fā)生了什么±ǘ。現(xiàn)在有五種主流瀏覽器——IE、Firefox伶选、Safari史飞、Chrome及Opera。
二.仰税、瀏覽器的主要功能
瀏覽器的主要功能是將用戶選擇的web資源呈現(xiàn)出來(lái)构资，它需要從服務(wù)器請(qǐng)求資源，并將其顯示在瀏覽器窗口中陨簇，資源的格式通常是HTML吐绵，也包括PDF、image及其他格式河绽。用戶用URI（Uniform Resource Identifier統(tǒng)一資源標(biāo)識(shí)符）來(lái)指定所請(qǐng)求資源的位置己单。HTML和CSS規(guī)范中規(guī)定了瀏覽器解釋html文檔的方式，由W3C組織對(duì)這些規(guī)范進(jìn)行維護(hù)耙饰，W3C是負(fù)責(zé)制定web標(biāo)準(zhǔn)的組織纹笼。
三、瀏覽器的主要構(gòu)成
1.用戶界面－ 包括地址欄苟跪、后退/前進(jìn)按鈕廷痘、書簽?zāi)夸浀嚷В簿褪悄闼吹降某擞脕?lái)顯示你所請(qǐng)求頁(yè)面的主窗口之外的其他部分。
2. 瀏覽器引擎 － 用來(lái)查詢及操作渲染引擎的接口笋额。
3. 渲染引擎 － 用來(lái)顯示請(qǐng)求的內(nèi)容元暴，例如，如果請(qǐng)求內(nèi)容為html鳞陨，它負(fù)責(zé)解析html及css昨寞，并將解析后的結(jié)果顯示出來(lái)。
4. 網(wǎng)絡(luò) － 用來(lái)完成網(wǎng)絡(luò)調(diào)用厦滤，例如http請(qǐng)求援岩，它具有平臺(tái)無(wú)關(guān)的接口，可以在不同平臺(tái)上工作掏导。
5.UI后端 － 用來(lái)繪制類似組合選擇框及對(duì)話框等基本組件享怀，具有不特定于某個(gè)平臺(tái)的通用接口，底層使用操作系統(tǒng)的用戶接口趟咆。
6. JS解釋器 － 用來(lái)解釋執(zhí)行JS代碼添瓷。
7. 數(shù)據(jù)存儲(chǔ) － 屬于持久層，瀏覽器需要在硬盤中保存類似cookie的各種數(shù)據(jù)值纱，HTML5定義了web database技術(shù)鳞贷，這是一種輕量級(jí)完整的客戶端存儲(chǔ)技術(shù)。
需要注意的是虐唠，不同于大部分瀏覽器搀愧，Chrome為每個(gè)Tab分配了各自的渲染引擎實(shí)例，每個(gè)Tab就是一個(gè)獨(dú)立的進(jìn)程疆偿。
四咱筛、渲染引擎（The rendering engine）
渲染引擎的職責(zé)就是渲染，即在瀏覽器窗口中顯示所請(qǐng)求的內(nèi)容杆故。默認(rèn)情況下迅箩，渲染引擎可以顯示html、xml文檔及圖片处铛，它也可以借助插件（一種瀏覽器擴(kuò)展）顯示其他類型數(shù)據(jù)饲趋，例如使用PDF閱讀器插件，可以顯示PDF格式撤蟆。Firefox篙贸、Chrome和Safari是基于兩種渲染引擎構(gòu)建的，F(xiàn)irefox使用Geoko——Mozilla自主研發(fā)的渲染引擎枫疆，Safari和Chrome都使用webkit。
渲染主流程（The main flow）
渲染引擎首先通過網(wǎng)絡(luò)獲得所請(qǐng)求文檔的內(nèi)容敷鸦，通常以8K分塊的方式完成息楔。解析html以構(gòu)建dom樹 -> 構(gòu)建render樹 -> 布局render樹 -> 繪制render樹
渲染引擎開始解析html寝贡，并將標(biāo)簽轉(zhuǎn)化為內(nèi)容樹中的dom節(jié)點(diǎn)。接著值依，它解析外部CSS文件及style標(biāo)簽中的樣式信息圃泡。這些樣式信息以及html中的可見性指令將被用來(lái)構(gòu)建另一棵樹——render樹。Render樹由一些包含有顏色和大小等屬性的矩形組成愿险，它們將被按照正確的順序顯示到屏幕上颇蜡。Render樹構(gòu)建好了之后，將會(huì)執(zhí)行布局過程辆亏，它將確定每個(gè)節(jié)點(diǎn)在屏幕上的確切坐標(biāo)风秤。再下一步就是繪制，即遍歷render樹扮叨，并使用UI后端層繪制每個(gè)節(jié)點(diǎn)缤弦。
值得注意的是，這個(gè)過程是逐步完成的彻磁，為了更好的用戶體驗(yàn)碍沐，渲染引擎將會(huì)盡可能早的將內(nèi)容呈現(xiàn)到屏幕上，并不會(huì)等到所有的html都解析完成之后再去構(gòu)建和布局render樹衷蜓。它是解析完一部分內(nèi)容就顯示一部分內(nèi)容累提，同時(shí)，可能還在通過網(wǎng)絡(luò)下載其余內(nèi)容磁浇。
五斋陪、解析與DOM樹構(gòu)建
解析一個(gè)文檔即將其轉(zhuǎn)換為具有一定意義的結(jié)構(gòu)——編碼可以理解和使用的東西。解析的結(jié)果通常是表達(dá)文檔結(jié)構(gòu)的節(jié)點(diǎn)樹扯夭，稱為解析樹或語(yǔ)法樹鳍贾。解析基于文檔依據(jù)的語(yǔ)法規(guī)則——文檔的語(yǔ)言或格式。每種可被解析的格式必須具有由詞匯及語(yǔ)法規(guī)則組成的特定的文法交洗，稱為上下文無(wú)關(guān)文法骑科。人類語(yǔ)言不具有這一特性，因此不能被一般的解析技術(shù)所解析构拳。
解析可以分為兩個(gè)子過程——語(yǔ)法分析及詞法分析
詞法分析就是將輸入分解為符號(hào)咆爽，符號(hào)是語(yǔ)言的詞匯表——基本有效單元的集合。對(duì)于人類語(yǔ)言來(lái)說(shuō)置森，它相當(dāng)于我們字典中出現(xiàn)的所有單詞斗埂。語(yǔ)法分析指對(duì)語(yǔ)言應(yīng)用語(yǔ)法規(guī)則。解析器一般將工作分配給兩個(gè)組件——詞法分析器（有時(shí)也叫分詞器）負(fù)責(zé)將輸入分解為合法的符號(hào)凫海，解析器則根據(jù)語(yǔ)言的語(yǔ)法規(guī)則分析文檔結(jié)構(gòu)呛凶，從而構(gòu)建解析樹，詞法分析器知道怎么跳過空白和換行之類的無(wú)關(guān)字符行贪。
轉(zhuǎn)換（Translation）
很多時(shí)候漾稀，解析樹并不是最終結(jié)果模闲。解析一般在轉(zhuǎn)換中使用——將輸入文檔轉(zhuǎn)換為另一種格式。編譯就是個(gè)例子崭捍，編譯器在將一段源碼編譯為機(jī)器碼的時(shí)候尸折，先將源碼解析為解析樹，然后將該樹轉(zhuǎn)換為一個(gè)機(jī)器碼文檔殷蛇。
六实夹、布局（Layout）
當(dāng)渲染對(duì)象被創(chuàng)建并添加到樹中，它們并沒有位置和大小粒梦，計(jì)算這些值的過程稱為layout或reflow亮航。Html使用基于流的布局模型，意味著大部分時(shí)間谍倦，可以以單一的途徑進(jìn)行幾何計(jì)算塞赂。流中靠后的元素并不會(huì)影響前面元素的幾何特性，所以布局可以在文檔中從右向左昼蛀、自上而下的進(jìn)行宴猾。也存在一些例外，比如html tables叼旋。坐標(biāo)系統(tǒng)相對(duì)于根frame仇哆，使用top和left坐標(biāo)。布局是一個(gè)遞歸的過程夫植，由根渲染對(duì)象開始讹剔，它對(duì)應(yīng)html文檔元素，布局繼續(xù)遞歸的通過一些或所有的frame層級(jí)详民，為每個(gè)需要幾何信息的渲染對(duì)象進(jìn)行計(jì)算延欠。
七、繪制
繪制階段沈跨，遍歷渲染樹并調(diào)用渲染對(duì)象的paint方法將它們的內(nèi)容顯示在屏幕上由捎，繪制使用UI基礎(chǔ)組件。和布局一樣饿凛，繪制也可以是全局的——繪制完整的樹——或增量的狞玛。在增量的繪制過程中，一些渲染對(duì)象以不影響整棵樹的方式改變涧窒，改變的渲染對(duì)象使其在屏幕上的矩形區(qū)域失效心肪，這將導(dǎo)致操作系統(tǒng)將其看作dirty區(qū)域，并產(chǎn)生一個(gè)paint事件纠吴，操作系統(tǒng)很巧妙的處理這個(gè)過程硬鞍，并將多個(gè)區(qū)域合并為一個(gè)。Chrome中，這個(gè)過程更復(fù)雜些固该，因?yàn)殇秩緦?duì)象在不同的進(jìn)程中碑隆，而不是在主進(jìn)程中。Chrome在一定程度上模擬操作系統(tǒng)的行為蹬音，表現(xiàn)為監(jiān)聽事件并派發(fā)消息給渲染根，在樹中查找到相關(guān)的渲染對(duì)象休玩，重繪這個(gè)對(duì)象（往往還包括它的children）著淆。
八、渲染引擎的線程
渲染引擎是單線程的拴疤，除了網(wǎng)絡(luò)操作以外永部，幾乎所有的事情都在單一的線程中處理，在Firefox和Safari中呐矾，這是瀏覽器的主線程苔埋，Chrome中這是tab的主線程。瀏覽器主線程是一個(gè)事件循環(huán)蜒犯，它被設(shè)計(jì)為無(wú)限循環(huán)以保持執(zhí)行過程的可用组橄，等待事件（例如layout和paint事件）并執(zhí)行它們。
九罚随、CSS2可視模型
CSS盒模型描述了矩形盒玉工，這些矩形盒是為文檔樹中的元素生成的，并根據(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趾疚。
