摘要：渲染引擎的概述渲染引擎的主要職責(zé)是在瀏覽器屏幕上顯示請求的頁面。中，渲染樹中的每個(gè)節(jié)點(diǎn)都被稱為的渲染器或渲染對象。坐標(biāo)系相對于根渲染器。增量只有一些渲染器以不影響整個(gè)樹的方式進(jìn)行更改。渲染器使其矩形在屏幕上無效。

到目前為止，在我們之前的“JavaScript工作原理”系列文章中，我們一直關(guān)注JavaScript作為一種語言，其功能，它如何在瀏覽器中執(zhí)行，如何優(yōu)化等等。

但是，當(dāng)您構(gòu)建Web應(yīng)用程序時(shí)，您不只是編寫?yīng)毩⑦\(yùn)行的獨(dú)立JavaScript代碼。您編寫的JavaScript與環(huán)境進(jìn)行交互。了解這種環(huán)境，它是如何工作的以及它的組成是什么，將使您能夠構(gòu)建更好的應(yīng)用程序，并對應(yīng)用程序發(fā)布后可能出現(xiàn)的潛在問題做好充分準(zhǔn)備。

那么，讓我們看看瀏覽器的主要組件是什么：

用戶界面：這包括地址欄，后退和前進(jìn)按鈕，書簽菜單等。實(shí)質(zhì)上，這是瀏覽器顯示的每個(gè)部分，除了您看到網(wǎng)頁本身的窗口。

瀏覽器引擎：它處理用戶界面和渲染引擎之間的交互

渲染引擎：它負(fù)責(zé)顯示網(wǎng)頁。渲染引擎解析HTML和CSS，并在屏幕上顯示解析的內(nèi)容。

網(wǎng)絡(luò)：這些是網(wǎng)絡(luò)調(diào)用，例如XHR請求，通過對不同平臺(tái)使用不同的實(shí)現(xiàn)來實(shí)現(xiàn)，這些平臺(tái)位于獨(dú)立于平臺(tái)的接口之后。在本系列的前一篇文章中，我們更詳細(xì)地討論了網(wǎng)絡(luò)層。

UI后端：用于繪制核心小部件，如復(fù)選框和窗口。這個(gè)后端公開了一個(gè)不是平臺(tái)特定的通用接口。它使用下面的操作系統(tǒng)UI方法。

JavaScript引擎：我們在該系列的前一篇文章中詳細(xì)介紹了這一點(diǎn)。基本上，這是JavaScript執(zhí)行的地方。

數(shù)據(jù)持久性：您的應(yīng)用可能需要在本地存儲(chǔ)所有數(shù)據(jù)。支持的存儲(chǔ)機(jī)制類型包括localStorage，indexDB，WebSQL和FileSystem。

在這篇文章中，我們將關(guān)注渲染引擎，因?yàn)樗幚鞨TML和CSS的解析和可視化，這是大多數(shù)JavaScript應(yīng)用程序不斷與之交互的東西。

渲染引擎的概述

渲染引擎的主要職責(zé)是在瀏覽器屏幕上顯示請求的頁面。

渲染引擎可以顯示HTML和XML文檔和圖像。如果您使用額外的插件，引擎還可以顯示不同類型的文檔，如PDF。

渲染引擎

與JavaScript引擎類似，不同的瀏覽器也使用不同的渲染引擎。這些是一些流行的：

Gecko - 火狐

WebKit - Safari

Blink - Chrome，Opera（從15版開始）

渲染的過程

渲染引擎從網(wǎng)絡(luò)層接收所請求文檔的內(nèi)容。

構(gòu)建DOM樹
渲染引擎的第一步是解析HTML文檔并將解析的元素轉(zhuǎn)換為DOM樹中的實(shí)際DOM節(jié)點(diǎn)。

想象一下你有以下的文字輸入：

  
    
    
  
  
    
 Hello,  friend!  
    
 
      
    
  

這個(gè)HTML的DOM樹如下所示：

基本上，每個(gè)元素都被表示為所有其子元素的父節(jié)點(diǎn)子元素直接包含在它的內(nèi)部。

構(gòu)建CSSOM樹

CSSOM指的是CSS對象模型。當(dāng)瀏覽器構(gòu)建頁面的DOM時(shí)，它在引用外部theme.css CSS樣式表的head部分遇到link標(biāo)記。預(yù)計(jì)它可能需要該資源來呈現(xiàn)頁面，它立即發(fā)出請求。假設(shè)theme.css文件包含以下內(nèi)容：

body { 
  font-size: 16px;
}

p { 
  font-weight: bold; 
}

span { 
  color: red; 
}

p span { 
  display: none; 
}

img { 
  float: right; 
}

與HTML一樣，引擎需要將CSS轉(zhuǎn)換為瀏覽器可以使用的東西 - CSSOM。 以下是CSSOM樹的外觀：

你想知道為什么CSSOM有一個(gè)樹結(jié)構(gòu)？當(dāng)計(jì)算頁面上任何對象的最后一組樣式時(shí)，瀏覽器從適用于該節(jié)點(diǎn)的最一般規(guī)則開始（例如，如果它是body元素的子元素，則應(yīng)用所有body樣式），然后遞歸地細(xì)化通過應(yīng)用更具體的規(guī)則來計(jì)算樣式。

讓我們來看看我們給出的具體例子。包含在body元素中的span標(biāo)簽中的任何文本的字體大小為16像素，并且具有紅色。這些樣式是從body元素繼承而來的。如果span元素是p元素的子元素，則由于正在應(yīng)用更具體的樣式，因此不會(huì)顯示其內(nèi)容。

另外請注意，上面的樹不是完整的CSSOM樹，只顯示了我們決定在樣式表中重寫的樣式。每個(gè)瀏覽器都提供了一組默認(rèn)的樣式，也稱為“user agent styles” - 這是我們在沒有明確提供任何樣式時(shí)看到的。我們的樣式簡單地覆蓋這些默認(rèn)值。

構(gòu)建渲染樹

HTML中的可視指令與CSSOM樹中的樣式數(shù)據(jù)結(jié)合在一起用于創(chuàng)建渲染樹。

你可能會(huì)問什么是渲染樹？這是按照它們在屏幕上顯示的順序構(gòu)建的視覺元素樹。它是HTML和相應(yīng)的CSS的可視化表示。此樹的目的是為了以正確的順序繪制內(nèi)容。

Webkit中，渲染樹中的每個(gè)節(jié)點(diǎn)都被稱為的渲染器或渲染對象。

這就是上述DOM和CSSOM樹的渲染器樹的外觀：

為了構(gòu)建渲染樹，瀏覽器大致如下：

從DOM樹的根開始，它遍歷每個(gè)可見節(jié)點(diǎn)。某些節(jié)點(diǎn)不可見（例如，腳本標(biāo)記，元標(biāo)記等），并且由于它們未反映在呈現(xiàn)的輸出中而被忽略。一些節(jié)點(diǎn)通過CSS隱藏，并且也從渲染樹中省略。例如，span節(jié)點(diǎn) - 在上面的例子中，它并不存在于渲染樹中，因?yàn)槲覀冇幸粋€(gè)明確的規(guī)則來設(shè)置display：none屬性。

對于每個(gè)可見節(jié)點(diǎn)，瀏覽器找到適當(dāng)?shù)腃SSOM規(guī)則并應(yīng)用它們。

它發(fā)出帶有內(nèi)容及其計(jì)算樣式的可見節(jié)點(diǎn)

你可以在這里看看RenderObject的源代碼（在WebKit中）：https://github.com/WebKit/web...

我們來看看這個(gè)類的一些核心內(nèi)容：

class RenderObject : public CachedImageClient {
  // Repaint the entire object.  Called when, e.g., the color of a border changes, or when a border
  // style changes.
  
  Node* node() const { ... }
  
  RenderStyle* style;  // the computed style
  const RenderStyle& style() const;
  
  ...
}

每個(gè)渲染器代表一個(gè)矩形區(qū)域，通常對應(yīng)于一個(gè)節(jié)點(diǎn)的CSS框。它包括幾何信息，例如寬度，高度和位置。

渲染樹的布局

當(dāng)渲染器被創(chuàng)建并添加到樹中時(shí)，它沒有位置和大小。計(jì)算這些值稱為布局。

HTML使用基于流程的布局模型，這意味著大部分時(shí)間內(nèi)它可以通過一次傳遞計(jì)算幾何。坐標(biāo)系相對于根渲染器。使用頂部和左側(cè)坐標(biāo)。

布局是一個(gè)遞歸過程 - 它從根呈現(xiàn)器開始，它對應(yīng)于HTML文檔的元素。布局通過部分或整個(gè)渲染器層次結(jié)構(gòu)遞歸地繼續(xù)遞歸，為需要它的每個(gè)渲染器計(jì)算幾何信息。

根渲染器的位置是0,0，并且其尺寸具有瀏覽器窗口（也稱為視口）的可見部分的尺寸。

開始布局過程意味著給每個(gè)節(jié)點(diǎn)確切的坐標(biāo)，它應(yīng)該出現(xiàn)在屏幕上。

繪制渲染樹

在此階段中，遍歷渲染器樹并調(diào)用渲染器的paint（）方法以在屏幕上顯示內(nèi)容。

繪畫可以是全局或增量式（與布局類似）：

全局 - 整個(gè)樹被重新繪制。

增量 - 只有一些渲染器以不影響整個(gè)樹的方式進(jìn)行更改。渲染器使其矩形在屏幕上無效。這會(huì)導(dǎo)致操作系統(tǒng)將其視為需要重繪和生成繪畫事件的區(qū)域。操作系統(tǒng)通過將幾個(gè)區(qū)域合并為一個(gè)智能方式來完成。

一般來說，了解繪畫是一個(gè)漸進(jìn)的過程是很重要的。為了更好的用戶體驗(yàn)，渲染引擎會(huì)嘗試盡快在屏幕上顯示內(nèi)容。它不會(huì)等到所有的HTML被解析，才開始構(gòu)建和布置渲染樹。內(nèi)容的部分內(nèi)容將被解析并顯示，而該過程繼續(xù)保持來自網(wǎng)絡(luò)的其余內(nèi)容項(xiàng)目。

處理腳本和樣式表的順序

當(dāng)解析器到達(dá)