資訊專(zhuān)欄INFORMATION COLUMN
摘要：值得注意的是，谷歌瀏覽器和大多數(shù)瀏覽器不同，每一個(gè)選項(xiàng)卡都是渲染引擎的一個(gè)實(shí)例，都擁有獨(dú)立的進(jìn)程。組件之間的通信火狐和谷歌都發(fā)展了一個(gè)特殊的通信結(jié)構(gòu)，后面我們將會(huì)多帶帶來(lái)講。渲染引擎我們所討論的幾款瀏覽器火狐谷歌都是基于兩種渲染引擎建立的。
寫(xiě)在前面
這篇文章是一篇譯文，年代有點(diǎn)久，部分內(nèi)容有過(guò)時(shí)，請(qǐng)讀者仔細(xì)閱讀，翻譯自“How browser work”，原文地址為點(diǎn)擊這里查看原文
簡(jiǎn)介web瀏覽器可能是我們使用最廣的軟件了。在這篇文章中我將會(huì)詳細(xì)介紹一下瀏覽器在背后究竟是如何工作的。我們將會(huì)知道，在你在地址欄鍵入“google.com”到瀏覽器呈現(xiàn)頁(yè)面的這段時(shí)間內(nèi)，究竟發(fā)生了什么。
我們將會(huì)探討的瀏覽器
如今我們常用的瀏覽器主要有5種：IE、Firefox、Safari、Chrome以及Opera。我們將會(huì)以開(kāi)源瀏覽器Firefox、Chrome和Safari（部分開(kāi)源）為例，據(jù)W3C瀏覽器相關(guān)統(tǒng)計(jì)，以上三種瀏覽器占比大概有60%（2009 年 10月）。由此可見(jiàn)，現(xiàn)如今開(kāi)源的瀏覽器已經(jīng)占據(jù)瀏覽器市場(chǎng)的大部分了。
瀏覽器主要功能
瀏覽器主要的功能是通過(guò)向服務(wù)器請(qǐng)求，來(lái)獲取你所想要的網(wǎng)絡(luò)資源，并將它渲染到瀏覽器窗口中。而資源類(lèi)型通常是html文件，但也可能是PDF，圖片或者是其他類(lèi)型的資源。資源地址通常是由用戶(hù)鍵入的URI(統(tǒng)一資源標(biāo)識(shí)符)來(lái)決定的。更多內(nèi)容在以下網(wǎng)絡(luò)部分會(huì)講到。
瀏覽器渲染解讀html文件是依據(jù)定義好的html結(jié)構(gòu)以及css樣式。這些規(guī)則描述主要是由W3C組織來(lái)制定的?，F(xiàn)在的html的版本是4，版本5正在規(guī)劃準(zhǔn)備中。而css的版本是2，同樣的，css3也正在規(guī)劃。
很多年以來(lái)，各種瀏覽器只有部分是遵從標(biāo)準(zhǔn)的，同時(shí)各個(gè)瀏覽器廠商都發(fā)展了他們自己獨(dú)有的東西。這給web開(kāi)發(fā)者帶來(lái)了很多兼容性問(wèn)題。如今多數(shù)瀏覽器或多或少會(huì)遵從標(biāo)準(zhǔn)。
在用戶(hù)界面上，各個(gè)瀏覽器之間還是有很多相似之處的。比如說(shuō)：
地址欄用于鍵入U(xiǎn)RI
回退和前進(jìn)按鈕
書(shū)簽選項(xiàng)
用于刷新和停止的按鈕
主頁(yè)按鈕
令人詫異的是，沒(méi)有任何正式的規(guī)范指定用戶(hù)界面，這只是多年經(jīng)驗(yàn)和瀏覽器相互模仿形成的良好習(xí)慣。HTML5規(guī)范不定義瀏覽器必須具備的UI元素，但列出了一些常見(jiàn)元素。如地址欄、狀態(tài)欄、工具欄等。當(dāng)然，像Firefox下載管理器這樣的功能，是獨(dú)有的。
更多相關(guān)內(nèi)容我們?cè)谟脩?hù)界面部分再介紹。
瀏覽器深層結(jié)構(gòu)
用戶(hù)界面－包括了地址欄、返回前進(jìn)按鈕、書(shū)簽菜單等。在每一個(gè)請(qǐng)求頁(yè)內(nèi)，你都可以看到這些UI組件，除了主窗口。
瀏覽器引擎－用來(lái)查詢(xún)和操作渲染引擎的接口
渲染引擎－負(fù)責(zé)渲染請(qǐng)求的內(nèi)容。比如，若果請(qǐng)求的資源是html文件，那么渲染引擎負(fù)責(zé)解析html以及css，然后再把結(jié)果渲染到頁(yè)面。
網(wǎng)絡(luò)連接－用于處理網(wǎng)絡(luò)請(qǐng)求，如http請(qǐng)求。它不依賴(lài)不同的平臺(tái)，這意味著它可以在不同平臺(tái)工作。
UI后臺(tái)－用于渲染基礎(chǔ)部件，如多選框、窗口等。它暴露了一個(gè)不是特定平臺(tái)的通用接口，在底層調(diào)用了操作系統(tǒng)的用戶(hù)接口。
js引擎－用于解析javascript代碼
數(shù)據(jù)存儲(chǔ)－這是一個(gè)持久層。瀏覽器需要在硬盤(pán)中存儲(chǔ)各式數(shù)據(jù)，比如cookie。HTML5定義了‘web database’這樣輕量級(jí)的web瀏覽器存儲(chǔ)技術(shù)。
值得注意的是，谷歌瀏覽器和大多數(shù)瀏覽器不同，每一個(gè)選項(xiàng)卡都是渲染引擎的一個(gè)實(shí)例，都擁有獨(dú)立的進(jìn)程。我將會(huì)對(duì)以上每個(gè)組件都寫(xiě)一個(gè)章節(jié)來(lái)講解。
組件之間的通信
火狐和谷歌都發(fā)展了一個(gè)特殊的通信結(jié)構(gòu)，后面我們將會(huì)多帶帶來(lái)講。
渲染引擎說(shuō)到渲染引擎的責(zé)任，好吧，所謂渲染，就是將請(qǐng)求到的內(nèi)容展現(xiàn)在瀏覽器屏幕上。
默認(rèn)情況下，渲染引擎會(huì)將HTML和XMl文檔以及圖片展示出來(lái)。當(dāng)然，通過(guò)一些插件（瀏覽器擴(kuò)展），渲染引擎也能夠展現(xiàn)其它類(lèi)型的文檔。舉例來(lái)說(shuō)，用PDF擴(kuò)展，渲染引擎可以展現(xiàn)PDF文檔。我們會(huì)多帶帶拿一章篇幅來(lái)介紹瀏覽器插件和擴(kuò)展。在這章里，我們會(huì)把重點(diǎn)放在最主要的情況：渲染用CSS修飾的HTML和圖片。
渲染引擎
我們所討論的幾款瀏覽器－火狐、谷歌、Safari都是基于兩種渲染引擎建立的?；鸷褂玫氖荊ecko－一種Mozilla自主研發(fā)的渲染引擎。Safari和谷歌都是使用Webkit渲染引擎。
Webkit是開(kāi)源的，它一開(kāi)始是作為L(zhǎng)inux平臺(tái)上的引擎，經(jīng)過(guò)蘋(píng)果公司改良后支持了Mac和Windows平臺(tái)。詳情請(qǐng)參閱這里
主要流程
渲染引擎將會(huì)先通過(guò)網(wǎng)絡(luò)獲取請(qǐng)求的文檔內(nèi)容，這不操作通常以8k分塊的方式完成。
以下是渲染引擎拿到數(shù)據(jù)后主要的工作流程：
解析HTML并構(gòu)建DOM樹(shù) => 構(gòu)建render樹(shù) => render樹(shù)布局 => render樹(shù)繪制
渲染引擎開(kāi)始解析HTML文檔，并把標(biāo)簽轉(zhuǎn)化成內(nèi)容樹(shù)中的DOM節(jié)點(diǎn)。同時(shí)它也開(kāi)始解析樣式數(shù)據(jù)，外鏈的css文件以及style標(biāo)簽內(nèi)的樣式。所有這些樣式數(shù)據(jù)以及HTML中的可見(jiàn)性指令都是用來(lái)創(chuàng)建另一棵樹(shù)－－render 樹(shù)。
render樹(shù)由一些包含顏色、尺寸等視覺(jué)屬性的小方塊組成。這些小方塊將會(huì)按照正確的順序顯示在屏幕上。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://hztianpu.com/yun/82531.html
摘要：每種可解析的格式必須具有由詞匯及語(yǔ)法規(guī)則組成的特定的文法，這被稱(chēng)為上下文無(wú)關(guān)文法。解析器將會(huì)從詞法分析器獲取一個(gè)新符號(hào)，并且嘗試用某一種語(yǔ)法規(guī)則去匹配它。第二個(gè)匹配到規(guī)則的是，它匹配到第三條語(yǔ)法規(guī)則。 銜接 接著上文繼續(xù)。 在構(gòu)建好render樹(shù)后，瀏覽器就開(kāi)始進(jìn)行布局了。這意味著瀏覽器會(huì)給每個(gè)節(jié)點(diǎn)正確的坐標(biāo)，讓它們出現(xiàn)在該出現(xiàn)的地方。下一步就是進(jìn)行繪制了，瀏覽器將會(huì)遍歷render樹(shù)...
摘要：經(jīng)過(guò)半年的打磨，正式發(fā)布，主要是新增了一些常用組件，并使用命名，為接下來(lái)的微信小程序開(kāi)發(fā)做好準(zhǔn)備。這兩種方式實(shí)現(xiàn)的瀑布流式布局均支持首屏和網(wǎng)頁(yè)窗口大小改變時(shí)的列數(shù)自適應(yīng)。主要是對(duì)于標(biāo)準(zhǔn)里的布局方式草案中的布局方式進(jìn)行一些總結(jié)。 一勞永逸的搞定 flex 布局 尋根溯源話(huà)布局 一切都始于這樣一個(gè)問(wèn)題：怎樣通過(guò) CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開(kāi)始學(xué)習(xí) CSS 的時(shí)候，看...
摘要：主題來(lái)自于的典型面試問(wèn)題列表。有多種方法來(lái)處理事件委托。這種方法的缺點(diǎn)是父容器的偵聽(tīng)器可能需要檢查事件來(lái)選擇正確的操作，而元素本身不會(huì)是一個(gè)監(jiān)聽(tīng)器。 showImg(http://fw008950-flywheel.netdna-ssl.com/wp-content/uploads/2014/11/Get-Hired-Fast-How-to-Job-Search-Classifieds...
摘要：絕對(duì)底部前端掘金來(lái)自國(guó)外的設(shè)計(jì)達(dá)人，純，可以實(shí)現(xiàn)當(dāng)正文內(nèi)容很少時(shí)，底部位于窗口最下面。有效解決圖片使用單位邊角缺失的問(wèn)題前端掘金起因在移動(dòng)端使用布局時(shí)圖片也需要用單位。 CSS 絕對(duì)底部 - 前端 - 掘金來(lái)自國(guó)外的設(shè)計(jì)達(dá)人，純CSS，可以實(shí)現(xiàn): 當(dāng)正文內(nèi)容很少時(shí)，底部位于窗口最下面。當(dāng)改變窗口高度時(shí)，不會(huì)出現(xiàn)重疊問(wèn)題。甚至，創(chuàng)造該CSS的人還專(zhuān)門(mén)成立一個(gè)網(wǎng)站介紹這個(gè)CSS底部布局方案...
閱讀 887·2021-09-24 09:48
閱讀 2569·2021-08-26 14:14
閱讀 636·2019-08-30 13:08
閱讀 1533·2019-08-29 15:22
閱讀 3181·2019-08-29 11:06
閱讀 1090·2019-08-26 18:26
閱讀 1271·2019-08-26 13:53
閱讀 2723·2019-08-26 12:21
