国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

瀏覽器渲染的那些事(一)

littleGrow / 2454人閱讀

摘要：瀏覽器的主要概念瀏覽器主要分為這及部分。瀏覽器會(huì)解析，事實(shí)上，有三個(gè)的類對(duì)應(yīng)這三類文檔。瀏覽器的錯(cuò)誤處理相當(dāng)統(tǒng)一，雖然這不是當(dāng)前規(guī)范的一部分。

今天在推特看到一篇文章《當(dāng)頁(yè)面渲染時(shí)，瀏覽器發(fā)生了什么》，于是找了些資料，分享一下所得。

瀏覽器的主要概念

瀏覽器主要分為這及部分。

User Interface

用戶接口。瀏覽器中的地址欄、前進(jìn)后退、書簽菜單等。除了網(wǎng)頁(yè)顯示區(qū)域以外的都是。

Brower engine

瀏覽器引擎。查詢與操作渲染引擎的接口。

Rendering engine

渲染引擎。今天的內(nèi)容主角就是它~負(fù)責(zé)顯示請(qǐng)求的內(nèi)容

Networking

網(wǎng)絡(luò)。用于網(wǎng)絡(luò)請(qǐng)求，例如HTTP請(qǐng)求。

JavaScript Interpreter

用于解析執(zhí)行JavaScript代碼

UI Backend

繪制基礎(chǔ)原件，比如組合框、窗口。

Data Persistence

持久層。HTML5規(guī)定了完整的瀏覽器中的數(shù)據(jù)庫(kù)：web database

主要流程

Webkit主要流程如下：

Mozilla的Gecko渲染引擎主要流程

由圖可以發(fā)現(xiàn)，兩個(gè)引擎過程基本相同。主要有三個(gè)步驟：

解析。瀏覽器會(huì)解析HTML/SVG/XHTML，事實(shí)上，webkit有三個(gè)C++的類對(duì)應(yīng)這三類文檔。瀏覽器解析這三種文件會(huì)產(chǎn)生一個(gè)DOM Tree；解析CSS，產(chǎn)生style rules；解析Javacript，主要通過DOM API和CSSOM API來操作DOM Tree和CSS Rule Tree

解析完成后，瀏覽器引擎會(huì)通過DOM Tree和CSS Rule Tree來構(gòu)造Rendering Tree。

調(diào)用操作系統(tǒng)Native GUI的API繪制。

兩個(gè)引擎的差別在于它們起的名字不一樣，即語(yǔ)義差別：

webkit把可視化好的可視元素成為Render Tree,用Layout來表示元素的布局

Gecko把可視化好的可視元素成為Frame Tree，每個(gè)元素就是一個(gè)frame，元素的布局成為Reflow

當(dāng)然，也不是只有語(yǔ)義差別。還有一個(gè)細(xì)小的差別差別在于：
Gecko在HTML與DOM樹之間還多一個(gè)層content Sink，這是創(chuàng)建DOM對(duì)象的工廠。

DOM解析

解析由兩部分組成：分詞+構(gòu)建樹。
HTML5規(guī)范中，HTML解析流程如下圖：

分詞是詞法分析，把輸入解析成符號(hào)序列。
構(gòu)建樹的過程就是在不斷處理分詞器完成的節(jié)點(diǎn)。除了把元素添加到DOM樹上，還會(huì)將其添加到一個(gè)開放元素堆棧，用于糾正嵌套錯(cuò)誤和標(biāo)簽未關(guān)閉錯(cuò)誤。
但其實(shí)瀏覽器比我們想象的更強(qiáng)大更包容。瀏覽器的錯(cuò)誤處理相當(dāng)統(tǒng)一，雖然這不是當(dāng)前HTML規(guī)范的一部分。當(dāng)很多格式不良的HTML文檔出現(xiàn)在很多網(wǎng)站，瀏覽器會(huì)嘗試用和其他瀏覽器一樣的方式修復(fù)錯(cuò)誤。



    Web page parsing


    

        
Web page parsing

        
This is an example Web page.

DOM Tree解析如下：

CSS解析

Webkit使用Flext and Bison 解析器生成器，通過CSS語(yǔ)法文件自動(dòng)創(chuàng)建解析器。Bison會(huì)創(chuàng)建自下而上的移位歸約解析器。Firefox使用的是人工編寫的自上而下的解析器。

關(guān)于創(chuàng)建樹的流程以及樣式計(jì)算、重排重繪等部分，留到下一篇文章再寫咯~

參考文獻(xiàn)：

瀏覽器內(nèi)部工作原理

瀏覽器的渲染原理簡(jiǎn)介

How browsers work

有關(guān)網(wǎng)頁(yè)渲染，每個(gè)前端開發(fā)者都該知道的那點(diǎn)事

前端文摘：深入解析瀏覽器的幕后工作原理

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/115264.html

相關(guān)文章

  • 瀏覽器渲染那些事之 Reflow、Repaint

    摘要：原文鏈接瀏覽器渲染那些事之瀏覽器內(nèi)核渲染引擎在各個(gè)瀏覽器廠商你追我趕的形勢(shì)下，截止今日，產(chǎn)生了很多不同的瀏覽器，各個(gè)瀏覽器本質(zhì)大同小異，核心部分基本相似，由渲染引擎和引擎組成。 原文鏈接 瀏覽器渲染那些事之 Reflow、Repaint 瀏覽器內(nèi)核（渲染引擎） 在各個(gè)瀏覽器廠商你追我趕的形勢(shì)下，截止今日，產(chǎn)生了很多不同的瀏覽器，各個(gè)瀏覽器本質(zhì)大同小異，核心部分基本相似，由渲染引擎和 J...

    morgan 評(píng)論0 收藏0

  • 瀏覽器渲染的那些事(一)

    摘要：瀏覽器的主要概念瀏覽器主要分為這及部分。瀏覽器會(huì)解析，事實(shí)上，有三個(gè)的類對(duì)應(yīng)這三類文檔。瀏覽器的錯(cuò)誤處理相當(dāng)統(tǒng)一，雖然這不是當(dāng)前規(guī)范的一部分。 今天在推特看到一篇文章《當(dāng)頁(yè)面渲染時(shí)，瀏覽器發(fā)生了什么》，于是找了些資料，分享一下所得。 瀏覽器的主要概念 showImg(https://segmentfault.com/img/bVvOAv); 瀏覽器主要分為這及部分。 User In...

    cucumber 評(píng)論0 收藏0

  • 瀏覽器渲染的那些事(一)

    摘要：瀏覽器的主要概念瀏覽器主要分為這及部分。瀏覽器會(huì)解析，事實(shí)上，有三個(gè)的類對(duì)應(yīng)這三類文檔。瀏覽器的錯(cuò)誤處理相當(dāng)統(tǒng)一，雖然這不是當(dāng)前規(guī)范的一部分。 今天在推特看到一篇文章《當(dāng)頁(yè)面渲染時(shí)，瀏覽器發(fā)生了什么》，于是找了些資料，分享一下所得。 瀏覽器的主要概念 showImg(https://segmentfault.com/img/bVvOAv); 瀏覽器主要分為這及部分。 User In...

    sorra 評(píng)論0 收藏0

  • 瀏覽器渲染的那些事（二）

    摘要：接上一篇瀏覽器渲染的那些事一繼續(xù)說。哈希表的選擇器各不相同，包括，標(biāo)記名稱等。例如，如果選擇器是，就把規(guī)則放入的哈希表中還有一種通用哈希表，適合不屬于上述類別的規(guī)則。 接上一篇瀏覽器渲染的那些事（一）繼續(xù)說。 構(gòu)建呈現(xiàn)樹 Render Tree/Frame Tree 渲染的流程： 在這部分我們來講一下構(gòu)建Render Tree的過程。呈現(xiàn)樹主要是負(fù)責(zé)布局并將自身及其子元素繪制出來。We...

    沈建明 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<