瀏覽器渲染原理及流程

時間 2019-11-06

標籤瀏覽器渲染原理流程欄目瀏覽器简体版

原文原文鏈接

現代瀏覽器的組成

瀏覽器能夠分爲兩部分：shell和瀏覽器內核，shell是外殼，如工具欄，菜單等，內核是根本，是基於標記語言顯示的程序或模塊。css

瀏覽器內核分爲兩部分：渲染引擎和JS引擎。html

渲染引擎前端

渲染引擎主要負責解析瀏覽器所呈現的內容，好比HTML,CSS。渲染引擎的主要流程git

始解析 HTML 文檔，並將各標記逐個轉化成「內容樹」上的 DOM 節點。同時也會解析外部 CSS 文件以及樣式元素中的樣式數據。HTML 中這些帶有視覺指令的樣式信息將用於建立另外一個樹結構：呈現樹。

呈現樹包含多個帶有視覺屬性（如顏色和尺寸）的矩形。這些矩形的排列順序就是它們將在屏幕上顯示的順序。github

呈現樹構建完畢以後，進入「佈局」處理階段，也就是爲每一個節點分配一個應出如今屏幕上的確切座標。下一個階段是繪製 - 呈現引擎會遍歷呈現樹，由用戶界面後端層將每一個節點繪製出來。shell

須要着重指出的是，這是一個漸進的過程。爲達到更好的用戶體驗，呈現引擎會力求儘快將內容顯示在屏幕上。它沒必要等到整個 HTML 文檔解析完畢以後，就會開始構建呈現樹和設置佈局。在不斷接收和處理來自網絡的其他內容的同時，呈現引擎會將部份內容解析並顯示出來。 Webkit 渲染引擎主流程以下圖：數據庫

Gecko渲染引擎以下圖：

瀏覽器的結構

一、用戶界面。包括地址欄、前進/後退按鈕、書籤菜單等。除了瀏覽器主窗口顯示的您請求的頁面外，其餘顯示的各個部分都屬於用戶界面。後端

二、瀏覽器引擎。在用戶界面和呈現引擎之間傳送指令。瀏覽器

三、呈現引擎。負責顯示請求的內容。若是請求的內容是 HTML，它就負責解析 HTML 和 CSS 內容，並將解析後的內容顯示在屏幕上。bash

四、用戶界面後端。用於繪製基本的窗口小部件，好比組合框和窗口。其公開了與平臺無關的通用接口，而在底層使用操做系統的用戶界面方法。

五、JavaScript 解釋器。用於解析和執行 JavaScript 代碼。

六、數據存儲。這是持久層。瀏覽器須要在硬盤上保存各類數據，例如 Cookie。新的 HTML 規範 (HTML5) 定義了「網絡數據庫」，這是一個完整（可是輕便）的瀏覽器內數據庫。

七、網絡。用於網絡調用，好比 HTTP 請求。其接口與平臺無關，併爲全部平臺提供底層實現

關於DOM解析

有以下HTML片斷

<html>
<head>
<title>Web page parsing</title>
</head>
<body>
<div>
    <h1>Web page parsing</h1>
    <p>This is an example Web page.</p>
</div>
</body>
</html>
複製代碼

關於CSS解析

<title>A few quotes</title>
<para>
 Franklin said that <quote>"A penny saved is a penny earned."</quote>
</para>
<para>
 FDR said <quote>"We have nothing to fear but <span>fear itself.</span>"</quote>
</para>
</doc>
複製代碼

CSS樣式以下：

/* rule 1 */ doc { display: block; text-indent: 1em; }

/* rule 2 */ title { display: block; font-size: 3em; }

/* rule 3 */ para { display: block; }

/* rule 4 */ [class="emph"] { font-style: italic; }
複製代碼

解析成CSS tree

注意：CSS遍歷DOM，一層層找到對應的渲染規則是十分複雜的過程，這也是咱們常常要求儘可能精簡DOM結構，減小CSS嵌套層級的緣由。

CSS渲染流程

一、計算CSS屬性；二、構建Render Tree；三、Layout，進行定位，元素的座標及尺寸，將元素放到指定位置；四、繪製

注意：圖中有兩種箭頭，一種是指向流程自身的，表示「迴流」，即修改某個屬性會致使頁面進行從新渲染，一種的指向外部的，表示「重繪」，即修改某個屬性不會影響整個頁面佈局。

重繪與迴流

這是前端常常會提到的兩個概念。重繪：Repaint，能夠理解爲頁面局部某個元素要進行從新繪製，好比修改元素的背景顏色，可是幾何尺寸並不會變；迴流：Reflow，能夠理解爲頁面整個從新繪製，好比修改元素的尺寸，每每會致使整個render tree要進行從新計算，reflow是從html標籤開始自上而下一次從新計算元素尺寸，從新佈局。經過二者概念區別明顯得知，迴流要比重繪的成本大得多，咱們應該儘可能減小回流操做，減小頁面性能消耗。

（1）引發迴流的方法或操做：

任何會改變元素幾何信息(元素的位置和尺寸大小)的操做，都會觸發迴流。