我們經(jīng)常寫 HTML 、 CSS 和 JavaScript ，寫好這些之后，我們就會(huì)在瀏覽器中看到頁面，那瀏覽器究竟在這背后做了一些什么事情呢？本篇文章將揭曉答案！

我們提供的服務(wù)有：成都做網(wǎng)站、成都網(wǎng)站建設(shè)、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、伊美ssl等。為上1000+企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的伊美網(wǎng)站制作公司

了解瀏覽器的渲染原理是我們?cè)谕ㄍ顚哟蔚那岸碎_發(fā)中不可缺少的，它可以讓我們從更深層次、角度去考慮性能優(yōu)化等～

下面進(jìn)入正文～

進(jìn)程、線程

瀏覽器會(huì)分配一個(gè)線程“自上而下，從左到右”依次解析和渲染代碼，那么進(jìn)程和線程是什么，它們之間有著怎樣的關(guān)系呢？

進(jìn)程

一個(gè)進(jìn)程就是一個(gè)程序運(yùn)行的實(shí)例。當(dāng)啟動(dòng)一個(gè)程序的時(shí)候，操作系統(tǒng)會(huì)為該程序創(chuàng)建一塊內(nèi)存，用來存放代碼，運(yùn)行中的數(shù)據(jù)和一個(gè)執(zhí)行任務(wù)的主線程，這樣的一個(gè)運(yùn)行環(huán)境就叫進(jìn)程

線程

線程不能單獨(dú)存在，它是由進(jìn)程來啟動(dòng)和管理的。線程依附于進(jìn)程，進(jìn)程中使用多線程并行處理能提升運(yùn)算效率

兩者之間的關(guān)系

1、進(jìn)程中的任意一線程執(zhí)行出錯(cuò)，都會(huì)導(dǎo)致整個(gè)進(jìn)程的崩潰

2、線程之間可以共享數(shù)據(jù)

3、當(dāng)一個(gè)進(jìn)程關(guān)閉后，操作系統(tǒng)會(huì)回收進(jìn)程所占用的內(nèi)存

4、進(jìn)程之間的內(nèi)容相互隔離

渲染機(jī)制

從HTML、CSS和JavaScript開始

了解瀏覽器的渲染原理，我們就要從理解 HTML 、 CSS 和 JavaScrip 開始，我們先來看一張圖

HTML (超文本標(biāo)記語言)，顧名思義，由標(biāo)記（標(biāo)簽）和文本組成，每個(gè)標(biāo)簽都有自己的語意，瀏覽器會(huì)根據(jù)標(biāo)簽和文本展示對(duì)應(yīng)的內(nèi)容。

CSS (層疊樣式表)，由選擇器和屬性組成，它可以改變 HTML 的樣式，比如上圖中，我們改變了 span 的顏色由藍(lán)色為綠色。

JavaScript ，我們可以通過 JS 完成很多事情，例如上圖中修改樣式。

下面開始分析渲染的原理

渲染流水線

渲染模塊由于渲染的機(jī)制的復(fù)雜，被劃分為了很多子階段，輸入的 HTML 經(jīng)過這些子階段，最后會(huì)輸出為像素。這樣的處理流程就叫做 渲染流水線

按照渲染的時(shí)間順序，流水線可分為幾個(gè)子階段：構(gòu)建 DOM 樹、樣式計(jì)算、布局階段、分層、繪制、分塊、光柵化和合成

構(gòu)建DOM樹

由于瀏覽器無法直接理解和使用 HTML ,所以需要將 HTML 轉(zhuǎn)換為瀏覽器能夠理解的結(jié)構(gòu)（ DOM 樹）

樹結(jié)構(gòu)示意圖

DOM樹的構(gòu)建過程

我們來分析一下下面這段代碼會(huì)構(gòu)建出一棵什么樣的 DOM 樹

我們先將上面的代碼運(yùn)行，然后在瀏覽器控制臺(tái)輸入 document ，看看會(huì)有什么效果

我們一層級(jí)一層級(jí)的打開就會(huì)看到如上圖的效果，我們可以根據(jù)這每一層級(jí)展開的效果，繪制出一棵 DOM 樹結(jié)構(gòu)，如下：

接下來，我們?cè)囈幌吕?JS 修改一下內(nèi)容，看有什么改變：

我們可以看到“瀏覽器”的文字變成了“chrome”

再來看一下 DOM 樹是否有改變

我們看到在“瀏覽器”的位置換成了“chrome”，那么如何讓 DOM 節(jié)點(diǎn)擁有樣式？

樣式計(jì)算

樣式計(jì)算，顧名思義，就是 計(jì)算出 DOM 節(jié)點(diǎn)中每個(gè)元素的具體樣式 ，這個(gè)階段會(huì)分為三部分：

• 把 CSS 轉(zhuǎn)換為瀏覽器能夠理解的結(jié)構(gòu)
• 轉(zhuǎn)換樣式表中的屬性值，使其標(biāo)準(zhǔn)化
• 計(jì)算出 DOM 樹中每個(gè)節(jié)點(diǎn)的樣式

CSS樣式來源

• link 導(dǎo)入外部樣式資源

瀏覽器會(huì)新開辟一個(gè)線程，去服務(wù)器獲取對(duì)應(yīng)的資源文件（不阻礙主線程的渲染）

• style 內(nèi)嵌樣式

從上到下解析，解析完繼續(xù)解析 DOM 結(jié)構(gòu)。在真實(shí)項(xiàng)目中，如果 css 代碼不是很多，或是移動(dòng)端項(xiàng)目，我們應(yīng)該使用內(nèi)嵌式，以此來減少 http 資源的請(qǐng)求，提高頁面渲染速度

• 行內(nèi)樣式
• @import 導(dǎo)入

它是同步的，不會(huì)開辟新線程去加載資源文件，而是讓主線程去獲取，這阻礙 DOM 結(jié)構(gòu)的繼續(xù)渲染；只有把外部樣式導(dǎo)入進(jìn)來，并且解析后，才會(huì)繼續(xù)渲染 DOM 結(jié)構(gòu)

把CSS轉(zhuǎn)換為瀏覽器能夠理解的結(jié)構(gòu)

瀏覽器就像不能理解 HTML 一樣，不理解 CSS ，所以當(dāng)渲染引擎接收到 CSS 文件時(shí)，會(huì)執(zhí)行轉(zhuǎn)換操作，將 CSS 文本轉(zhuǎn)換為瀏覽器可以理解的 styleSheets 結(jié)構(gòu)。

在 HTML 中，在瀏覽器中輸入 document 可以查看 html 的結(jié)構(gòu)。在 css 中，可以輸入 document.styleSheets 看到 css 的結(jié)構(gòu)

現(xiàn)在的結(jié)構(gòu)是空的，我們來加一些樣式，看看效果

轉(zhuǎn)換樣式表中的屬性值，使其標(biāo)準(zhǔn)化

屬性值標(biāo)準(zhǔn)化就是將所有值轉(zhuǎn)換為渲染引擎容易理解的、標(biāo)準(zhǔn)化的計(jì)算值。我們大致看一下效果：

• 標(biāo)準(zhǔn)化前


 
 
 

  
  
  
body { 
  
  
  
    font-size: 2em; 
  
  
  
    color: black; 
  
  
  
    font-weight: bold; 
  
  
  
    ... 
  
  
  
} 
 
 
 

• 標(biāo)準(zhǔn)化后


 
 
 

  
  
  
body { 
  
  
  
    font-size: 16px; 
  
  
  
    color: rgb(0, 0, 0); 
  
  
  
    font-weight: 700; 
  
  
  
    ... 
  
  
  
} 
 
 
 

計(jì)算出DOM樹中每個(gè)節(jié)點(diǎn)的具體樣式

樣式計(jì)算有兩個(gè)CSS的規(guī)則：繼承規(guī)則和層疊規(guī)則

• CSS繼承規(guī)則

CSS 繼承就是每個(gè) DOM 節(jié)點(diǎn)都包含有父節(jié)點(diǎn)的樣式。我們來看一下下面這段代碼中如何應(yīng)用到 DOM 節(jié)點(diǎn)上

 
 
 

  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
     
  
  
  
     
  
  
  
     
  
  
  
 
  
  
  
 
  
  
  
    
掘金
 
  
  
  
    
 
  
  
  
        瀏覽器 
  
  
  
        渲染原理 
  
  
  
        構(gòu)建DOM樹