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

資訊專欄INFORMATION COLUMN

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

cucumber / 704人閱讀

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

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

瀏覽器的主要概念

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

User Interface

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

Brower engine

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

Rendering engine

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

Networking

網絡。用于網絡請求，例如HTTP請求。

JavaScript Interpreter

用于解析執行JavaScript代碼

UI Backend

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

Data Persistence

持久層。HTML5規定了完整的瀏覽器中的數據庫：web database

主要流程

Webkit主要流程如下：

Mozilla的Gecko渲染引擎主要流程

由圖可以發現，兩個引擎過程基本相同。主要有三個步驟：

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

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

調用操作系統Native GUI的API繪制。

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

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

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

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

DOM解析

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

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



    Web page parsing


    

        
Web page parsing

        
This is an example Web page.

DOM Tree解析如下：

CSS解析

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

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

參考文獻：

瀏覽器內部工作原理

瀏覽器的渲染原理簡介

How browsers work

有關網頁渲染，每個前端開發者都該知道的那點事

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

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

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

相關文章

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

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

    morgan 評論0 收藏0

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

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

    littleGrow 評論0 收藏0

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

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

    sorra 評論0 收藏0

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

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

    沈建明 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<