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

littleGrow 發(fā)布于2019-08-30 13:02 / 2463人閱讀

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

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

瀏覽器的主要概念

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

User Interface

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

Brower engine

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

Rendering engine

渲染引擎。今天的內(nèi)容主角就是它~負責顯示請求的內(nèi)容

Networking

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

JavaScript Interpreter

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

UI Backend

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

Data Persistence

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

主要流程

Webkit主要流程如下：

Mozilla的Gecko渲染引擎主要流程

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

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

解析完成后，瀏覽器引擎會通過DOM Tree和CSS Rule Tree來構造Rendering Tree。

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

兩個引擎的差別在于它們起的名字不一樣，即語義差別：

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

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

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

DOM解析

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

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



    Web page parsing


    
        Web page parsing
        This is an example Web page.

DOM Tree解析如下：

CSS解析

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

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

參考文獻：

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

瀏覽器的渲染原理簡介

How browsers work

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

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

高性能計算云服務器那些事 webrtc支持那些瀏覽器 jsp 瀏覽器渲染那些奇怪的錯誤

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

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/115264.html

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

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

morgan 2019-08-29 12:19 評論0 收藏0
瀏覽器渲染的那些事(一)

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

cucumber 2019-08-02 15:54 評論0 收藏0
瀏覽器渲染的那些事(一)

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

sorra 2019-08-19 18:21 評論0 收藏0
瀏覽器渲染的那些事（二）

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

沈建明 2019-08-02 15:55 評論0 收藏0