對(duì)于HTML，css和JavaScript是如何變成頁面的，這個(gè)問題你了解過嗎？瀏覽器究竟在背后都做了些什么事情呢？讓我們?nèi)チ私鉃g覽器的渲染原理，是通往更深層次的開發(fā)必不可少的事情，能讓我們更深層次，多角度的去考慮性能優(yōu)化等問題。
HTML，css，JavaScript數(shù)據(jù)經(jīng)過中間渲染模塊的處理，最終顯示在頁面上（其中HTML超文本標(biāo)記語言，CSS層疊樣式表，JS為JavaScript，大家一般都知道是什么，寫過網(wǎng)頁的朋友，學(xué)習(xí)者大都知道的）。
HTML的內(nèi)容是由標(biāo)記和文本組成
CSS稱為層疊樣式表，是由選擇器和屬性組成
JS是可以使網(wǎng)頁的內(nèi)容“動(dòng)”起來
有人說渲染流程可以分為：構(gòu)建DOM樹，樣式計(jì)算，布局階段,分層，繪制，分塊，光柵化和合成等。其中瀏覽器復(fù)習(xí)一下，它是多線程的的，js是單線程的，JS在瀏覽器中，它可以是多線程的。
下面圍繞瀏覽器渲染原理話題開始描述，為什么要了解瀏覽器渲染頁面機(jī)制呢？。
首先，JavaScript引擎是基于事件驅(qū)動(dòng)單線程執(zhí)行的，渲染線程負(fù)責(zé)渲染瀏覽器界面，但是GUI渲染線程與JS引擎是互斥的，當(dāng)JS引擎執(zhí)行時(shí)GUI線程會(huì)被掛起，GUI的更新也會(huì)被保存在一個(gè)隊(duì)列中，等到JS引擎空閑時(shí)才有機(jī)會(huì)被執(zhí)行。
那么什么是DOCTYPE以及作用呢
DTD,document type definition, 文檔類型定義，是一系列的語法規(guī)則，用來定義XML或（x)HTML的文件類型。瀏覽器會(huì)使用它來判斷文檔類型，決定使用何種協(xié)議來解析,以及切換瀏覽器模式。
DOCTYPE是用來聲明文檔類型和DTD規(guī)范的，一個(gè)主要的用途便是文件的合法性驗(yàn)證。如果文件代碼不合法，那么瀏覽器解析時(shí)便會(huì)出一些差錯(cuò)。
下圖為瀏覽器的渲染過程圖：
重排的定義：DOM結(jié)構(gòu)中的各個(gè)元素都有自己的盒子模型，這些都需要瀏覽器根據(jù)各種樣式來計(jì)算并根據(jù)計(jì)算結(jié)果將元素放到它該出現(xiàn)的位置，這個(gè)過程稱之為reflow.
觸發(fā)Reflow情況
當(dāng)你增加，刪除，修改Dom節(jié)點(diǎn)時(shí)會(huì)導(dǎo)致Reflow或Repaint
當(dāng)你移動(dòng)DOM的位置，或是搞個(gè)動(dòng)畫的時(shí)候
當(dāng)你修改CSS樣式的時(shí)候
當(dāng)你Resize窗口的時(shí)候，或是滾動(dòng)的時(shí)候
當(dāng)你修改網(wǎng)頁的默認(rèn)字體時(shí)
重繪的定義，當(dāng)各種盒子的位置，大小以及其他屬性，例如顏色，字體大小等都確定下來后，瀏覽器于是便把這些元素都按照各自的特性繪制了一遍，于是頁面的內(nèi)容出現(xiàn)了，這個(gè)過程稱為repaint。
觸發(fā)Repaint情況
DOM改動(dòng)
CSS改動(dòng)
講到這里，下面來細(xì)分說一下吧！
簡單介紹一下瀏覽器的工作原理
了解瀏覽器
目前使用的主流的瀏覽器：Internet Explorer，F(xiàn)irefox，Safari，Chrome瀏覽器，Opera。讓我們看看瀏覽器統(tǒng)計(jì)數(shù)據(jù)的占比：
讓你說說瀏覽器的主要功能：
就是向服務(wù)器發(fā)出請求，在瀏覽器窗口中展示您選擇的網(wǎng)絡(luò)資源，資源一般指HTML文檔，可以是PDF，圖片或其他的類型。資源的位置由用戶使用URI（在電腦術(shù)語中，統(tǒng)一資源標(biāo)識(shí)符（Uniform Resource Identifier，URI)是一個(gè)用于標(biāo)識(shí)某一互聯(lián)網(wǎng)資源名稱的字符串）
瀏覽器的結(jié)構(gòu)
用戶界面：包括地址欄，前進(jìn)、后退按鈕，書簽菜單等。
瀏覽器引擎：在用戶界面和呈現(xiàn)引擎之間傳送指令。
呈現(xiàn)引擎：負(fù)責(zé)顯示請求的內(nèi)容。
網(wǎng)絡(luò)：用于網(wǎng)絡(luò)調(diào)用，比如HTTP請求；其接口與平臺(tái)無關(guān)，并為所有平臺(tái)提供底層實(shí)現(xiàn)。
用戶界面后端：用于繪制基本的窗口小部件，比如組合框和窗口。其公開了與平臺(tái)無關(guān)的通用接口，而在底層使用操作系統(tǒng)的用戶界面方法。
JavaScript解釋器：用于解析和執(zhí)行JavaScript代碼。
數(shù)據(jù)存儲(chǔ)：這是持久層。瀏覽器需要在硬盤上保存各種數(shù)據(jù)，例如Cookie。新的HTML規(guī)范定義了“網(wǎng)絡(luò)數(shù)據(jù)庫”，這是一個(gè)完整的瀏覽器內(nèi)數(shù)據(jù)庫。
注意：Chrome瀏覽器的每個(gè)標(biāo)簽頁都分別對(duì)應(yīng)一個(gè)呈現(xiàn)引擎實(shí)例，每個(gè)標(biāo)簽頁都是一個(gè)獨(dú)立的進(jìn)程。
呈現(xiàn)引擎
呈現(xiàn)引擎的作用是“呈現(xiàn)”，用于在瀏覽器的屏幕上顯示請求的內(nèi)容。
一般情況下，呈現(xiàn)引擎可顯示HTML和xml文檔與圖片，通過插件或?yàn)g覽器擴(kuò)展程序，可以顯示其他類型的內(nèi)容。瀏覽器（Firefox，Chrome瀏覽器和Safari）是基于兩種呈現(xiàn)引擎構(gòu)建的。
Firefox使用的是Gecko，而Safari和Chrome瀏覽器使用的是WebKit（WebKit 是一種開放源代碼呈現(xiàn)引擎）。
主流程
呈現(xiàn)引擎一開始會(huì)從網(wǎng)絡(luò)層獲取請求文檔的內(nèi)容，其大小一般限制在8000個(gè)塊以內(nèi)。
呈現(xiàn)引擎將開始解析HTML文檔，并將各標(biāo)記逐個(gè)轉(zhuǎn)化成“內(nèi)容樹”上的DOM節(jié)點(diǎn)。同時(shí)也會(huì)解析外部CSS文件以及樣式元素中的樣式數(shù)據(jù)。呈現(xiàn)樹構(gòu)建完后，會(huì)進(jìn)入“布局”處理階段，也就是為每個(gè)節(jié)點(diǎn)分配一個(gè)應(yīng)出現(xiàn)在屏幕上的確切坐標(biāo)。
解析
解析是呈現(xiàn)引擎中重要的環(huán)境，什么是解析呢？
解析文檔是指將文檔轉(zhuǎn)化成為有意義的結(jié)構(gòu)，可以讓代碼理解和使用的結(jié)構(gòu)。解析得到的結(jié)構(gòu)通常是代表了文檔結(jié)構(gòu)的節(jié)點(diǎn)樹，它稱為解析樹或者語法樹。
語法
解析是以文檔所遵循的語法規(guī)則為基礎(chǔ)的。解析的過程分為兩個(gè)子過程：詞法分析和語法分析。
什么是詞法分析呢？
詞法分析是將輸入內(nèi)容分割成大量標(biāo)記的過程，標(biāo)記（語言中的詞匯），構(gòu)成內(nèi)容的單位。相等于語言中的單詞。
什么是語法分析呢？
語法分析是應(yīng)用語言的語法規(guī)則的過程。
so，解析器一般解析工作分兩個(gè)組件處理，為詞法分析器（負(fù)責(zé)將輸入內(nèi)容分解成一個(gè)個(gè)有效標(biāo)記），解析器負(fù)責(zé)根據(jù)語言的語法規(guī)則來分析文檔的結(jié)構(gòu)，來構(gòu)建解析樹。
從源文檔到解析樹：Document->Lexical Analysis->Syntax Analysis->Parse Tree
解析是一個(gè)迭代的過程。
是這樣的，解析器會(huì)向詞法分析器請求一個(gè)新標(biāo)記，并嘗試將其與某條語法規(guī)則進(jìn)行匹配。如果匹配規(guī)則，解析器就會(huì)將對(duì)應(yīng)與該標(biāo)記的節(jié)點(diǎn)添加到解析樹中，然后繼續(xù)下一個(gè)。
但是如果沒有匹配的規(guī)則，解析器會(huì)將標(biāo)記存儲(chǔ)到內(nèi)部，繼續(xù)請求標(biāo)記，直到可與之匹配的規(guī)則，但是如果沒有直到的話，就會(huì)引發(fā)異常（文檔無效，包含語法錯(cuò)誤等）。
翻譯
解析通常是在翻譯的過程中，而翻譯是將輸入的文檔轉(zhuǎn)換為另一種形式，如編譯器將源代碼編譯成機(jī)器代碼，流程是將源代碼解析成解析樹，將解析樹翻譯成機(jī)器代碼文檔。
編譯流程：Source Code -> Parsing->Parse Tree -> Translation -> Machine Code
解析器類型
兩種基本的解析器類型：自上而下解析器，自下而上解析器
自上而下就是： 解析器從語法的高層結(jié)構(gòu)出發(fā)，嘗試從中找到匹配的結(jié)構(gòu)。
自下而上就是： 解析器從低層規(guī)則出發(fā)，將輸入內(nèi)容逐步轉(zhuǎn)化為語法規(guī)則，直至滿足高層規(guī)則。
你知道一種工具叫解析器生成器嗎，它能夠幫助你生成解析器，你只要向它提供你所使用的語言的語法，即詞匯和語法規(guī)則，然后就會(huì)生成相應(yīng)的解析器。
你暈了嗎？可以點(diǎn)擊這里查看：瀏覽器的工作原理：新式網(wǎng)絡(luò)瀏覽器幕后揭秘
https://www.html5rocks.com/zh...
瀏覽器從接收到頁面開始到頁面顯示，這整個(gè)過程中的所有步驟，稱 關(guān)鍵渲染路徑 ，一般分為兩步：頁面內(nèi)容加載完成和頁面資源完成，分別對(duì)應(yīng)于DOMContentLoaded和Load
關(guān)鍵：網(wǎng)頁的渲染過程如下，包含頁面加載和頁面渲染兩個(gè)過程。
頁面加載過程是，從服務(wù)器請求資源并構(gòu)建DOM樹的過程，網(wǎng)頁渲染過程指的是通過DOM樹渲染出視圖內(nèi)容。
DOM + CSS -> Render Tree
復(fù)習(xí)一下整個(gè)關(guān)鍵渲染包括：
解析HTML，生成DOM樹(DOM)
解析CSS，生成CSSOM樹
將DOM和CSSOM合并，生成渲染樹（Rendere-Tree）
計(jì)算渲染樹的布局Layout
將布局渲染到屏幕上Paint
了解渲染機(jī)制，主要還是為了性能的優(yōu)化：
了解瀏覽器如何進(jìn)行加載，引用外部樣式文件，JS文件時(shí)，將它們放到合適的位置，是瀏覽器最快的速度讓文件加載完畢；了解瀏覽器如何進(jìn)行解析，選擇最優(yōu)的寫法，構(gòu)建DOM結(jié)構(gòu)，組織CSS選擇器的時(shí)候，是為了提高瀏覽器的解析速率；了解瀏覽器如何進(jìn)行渲染，是可以減少“重繪”，“重新布局”的消耗。
那么上面一直說了解渲染機(jī)制，出現(xiàn)的幾個(gè)基本概念，這里先弄明白：
DOM: Document Object Model，瀏覽器將HTML解析成樹形的數(shù)據(jù)結(jié)構(gòu)
CSSOM: CSS Object Model，瀏覽器將CSS解析成樹形的數(shù)據(jù)結(jié)構(gòu)
Render Tree: DOM和CSSOM合并生成Render Tree
Layout: 計(jì)算出Render Tree每個(gè)節(jié)點(diǎn)的具體位置
Painting: 通過顯卡，將Layout后的節(jié)點(diǎn)內(nèi)容分別呈現(xiàn)到屏幕上
說說瀏覽器頁面渲染：
第一步：在CSS資源還沒有請求回來之前，先生成DOM樹；
第二步：當(dāng)所有的CSS請求回來之后，瀏覽器按照CSS的導(dǎo)入順序，依次進(jìn)行渲染，最后生成CSSOM樹；
第三步：把DOM樹和CSSOM樹結(jié)合在一起，生成有樣式，有結(jié)構(gòu)的RENDER TREE渲染樹；
最后一步：瀏覽器按照渲染樹，在頁面中進(jìn)行渲染和解析
來源于知乎的渲染引擎及關(guān)鍵渲染路徑
由于渲染機(jī)制過于復(fù)雜，渲染模塊在在執(zhí)行過程中劃分了很多階段，通過《瀏覽器工作原理與實(shí)踐》-渲染流程上分：構(gòu)建DOM樹，樣式計(jì)算，布局階段；渲染流程下分：分層，圖層繪制，柵格化（raster）操作，合成和顯示。
整個(gè)渲染流程，從HTML到DOM、樣式計(jì)算、布局、圖層、繪制、光柵化、合成和顯示。
面試一問：為什么要構(gòu)建DOM樹？
答：因?yàn)闉g覽器不能直接理解和使用HTML，so，需要將HTML轉(zhuǎn)換為瀏覽器能夠理解的結(jié)構(gòu)，即是DOM樹（樹結(jié)構(gòu)一般都了解了的）。
為了了解完整的DOM樹結(jié)構(gòu)，可以打開Chrome的“開發(fā)者工具”，或按F12，如圖下：
接下來要讓DOM節(jié)點(diǎn)擁有正確的樣式，這就需要樣式計(jì)算了。
樣式計(jì)算的目的是為了計(jì)算出DOM節(jié)點(diǎn)中每個(gè)元素的具體樣式：三步走
把CSS轉(zhuǎn)換為瀏覽器能夠理解的結(jié)構(gòu)
轉(zhuǎn)換樣式表中的屬性值，使其標(biāo)準(zhǔn)化
計(jì)算出DOM樹中每個(gè)節(jié)點(diǎn)的具體樣式（涉及到CSS的繼承規(guī)則和層疊規(guī)則）
當(dāng)渲染引擎接收到CSS文本時(shí)，會(huì)執(zhí)行一個(gè)轉(zhuǎn)換操作，將CSS文本轉(zhuǎn)換為瀏覽器可以理解的結(jié)構(gòu)——styleSheets。屬性值標(biāo)準(zhǔn)化的過程：將所有值轉(zhuǎn)換為渲染引擎容易理解的、標(biāo)準(zhǔn)化的計(jì)算值。
DOM元素最終計(jì)算的樣式如圖：
布局：計(jì)算出DOM樹中可見元素的幾何位置，第一創(chuàng)建布局樹（構(gòu)建一棵只包含可見元素布局樹），第二布局計(jì)算。
面試問題：CSS加載會(huì)阻塞頁面顯示嗎？
css加載不會(huì)阻塞DOM樹的解析
css加載會(huì)阻塞DOM樹的渲染
css加載會(huì)阻塞后面js語句的執(zhí)行
so，為了避免讓用戶看到長時(shí)間的白屏?xí)r間，應(yīng)該提高css的加載速度。
為了防止css阻塞，引起頁面白屏，可以提高頁面加載速度
使用cdn
對(duì)css進(jìn)行壓縮
合理利用緩存
減少http請求，將多個(gè)css文件合并
面試問題：下載CSS文件阻塞了，會(huì)阻塞DOM樹的合成嗎？會(huì)阻塞頁面的顯示嗎？
說了DOM生成、樣式計(jì)算和布局三個(gè)階段，接下來說說后面的階段。
說說分層：渲染引擎給頁面分了很多圖層，這些圖層按照一定順序疊加在一起，就形成了最終的頁面。完成圖層樹的構(gòu)建后，渲染引擎會(huì)對(duì)圖層樹中的每個(gè)圖層進(jìn)行繪制，為圖層繪制。然后進(jìn)行柵格化（raster）操作（繪制列表只是用來記錄繪制順序和繪制指令的列表，而實(shí)際上繪制操作是由渲染引擎中的合成線程來完成的），最后合成與顯示。
找一張整體的流程圖如下：
頁面渲染機(jī)制圖如下：
渲染過程圖如下：
瀏覽器渲染過程如下：
瀏覽器解析的三個(gè)東西流程圖如下：
一是HTML/SVG/XHTML
這里重要要說（重新說一下）兩個(gè)概念回流和重繪：
當(dāng)render tree中的一部分因?yàn)樵氐囊?guī)模尺寸，布局，隱藏等改變而需要重新構(gòu)建。這就稱為回流(reflow)。
每個(gè)頁面至少需要一次回流，就是在頁面第一次加載的時(shí)候。
在回流的時(shí)候，瀏覽器會(huì)使渲染樹中受到影響的部分失效，并重新構(gòu)造這部分渲染樹，完成回流后，瀏覽器會(huì)重新繪制受影響的部分到屏幕中，該過程成為重繪。
當(dāng)render tree中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風(fēng)格，而不會(huì)影響布局的，比如background-color。就叫稱為重繪。
本篇文章的最后，留下一些面試題：為什么減少重繪、重排能優(yōu)化Web性能嗎？如何能減少重繪、重排呢？
以上就是今天要講的內(nèi)容，本文僅僅簡單介紹了Chrome瀏覽器的渲染原理流程，感謝閱讀，如果你覺得這篇文章對(duì)你有幫助的話，也歡迎把它分享給更多的朋友。
文章來源: segmentfault.com，作者：程序員哆啦A夢，版權(quán)歸原作者所有。
原文鏈接：segmentfault.com/a/1190000038468748
聯(lián)系客服
