【瀏覽器渲染原理】步驟及優化

文章目錄

• 【瀏覽器渲染原理】步驟及優化
• • 一、對瀏覽器內核的理解
  • 二、瀏覽器的主要組成部分
  • 三、瀏覽器的渲染過程
  • 四、瀏覽器渲染優化
  • • ① 針對JavaScript：
    • ② 針對CSS：
    • ③ 針對DOM樹、CSSOM樹：
    • ④ 減少回流與重繪：
  • 五、渲染過程中遇到 JS 文件如何處理？
  • 六、什么是文檔的預解析？
  • 七、CSS 如何阻塞文檔解析？
  • 八、如何優化關鍵渲染路徑？
  • 九、什么情況會阻塞渲染？
  • 十、回流與重繪
  • • ① 回流與重繪的概念及觸發條件
    • • （1）回流（重排）
      • （2）重繪
    • ② 如何避免回流與重繪？
    • ③ 如何優化動畫？
  • 十一、style樣式的渲染
  • 十二、link引入

一、對瀏覽器內核的理解

瀏覽器內核主要分成兩部分：

• 渲染引擎的職責就是渲染，即在瀏覽器窗口中顯示所請求的內容。默認情況下，渲染引擎可以顯示 html、xml 文檔及圖片，它也可以借助插件顯示其他類型數據，例如使用 PDF 閱讀器插件，可以顯示 PDF 格式。
• JS 引擎：解析和執行 javascript 來實現網頁的動態效果。

最開始渲染引擎和 JS 引擎并沒有區分的很明確，后來 JS 引擎越來越獨立，內核就傾向于只指渲染引擎。

二、瀏覽器的主要組成部分

• ?戶界? - 包括地址欄、前進/后退按鈕、書簽菜單等。除了瀏覽器主窗?顯示的您請求的??外，其他顯示的各個部分都屬于?戶界?。
• 瀏覽器引擎 - 在?戶界?和呈現引擎之間傳送指令。
• 呈現引擎 - 負責顯示請求的內容。如果請求的內容是 HTML，它就負責解析 HTML 和 CSS 內容，并將解析后的內容顯示在屏幕上。
• ?絡 - ?于?絡調?，?如 HTTP 請求。其接?與平臺?關，并為所有平臺提供底層實現。
• ?戶界?后端 - ?于繪制基本的窗??部件，?如組合框和窗?。其公開了與平臺?關的通?接?，?在底層使?操作系統的?戶界??法。
• JavaScript 解釋器。?于解析和執? JavaScript 代碼。
• 數據存儲 - 這是持久層。瀏覽器需要在硬盤上保存各種數據，例如 Cookie。新的 HTML 規范 (HTML5) 定義了“?絡數據庫”，這是?個完整（但是輕便）的瀏覽器內數據庫。

值得注意的是，和?多數瀏覽器不同，Chrome 瀏覽器的每個標簽?都分別對應?個呈現引擎實例。每個標簽?都是?個獨?的進程。

三、瀏覽器的渲染過程

解析: 瀏覽器讀取的代碼的過程，就是解析。
渲染: 渲染完畢之后，用戶就能看見對應的東西

一個渲染引擎主要包括：HTML解釋器，css解析器，JavaScript引擎，布局Layout模塊，繪圖模塊

• HTML解析器 : 解析HTML文檔的解析，主要作用是將HTML文本解析為DM樹。
• CSS解析器: 它的作業是為DOM中的各個元素對象計算出樣式信息，為布局提供基礎設施
• JavaScript引擎: 使用JavaScript代碼可以修改網頁的內容，也能修改css的信息，JavaScript引擎能夠解釋JavaScript代碼，并通過DOM接口操作頁面。
• 布局(Layout):在DOM創建之后,需要將其中的元素對象同樣式信息結合起來，計算他們的大小位置等布局信息。
• 繪圖模塊(paint)：使用圖形庫將布局計算后的各個網頁的節點繪制層圖像結構。

點擊這里👉

大致過程如圖所示：

注意：這個過程是逐步完成的，為了更好的用戶體驗，渲染引擎將會盡可能早的將內容呈現到屏幕上，并不會等到所有的html 都解析完成之后再去構建和布局 render 樹。它是解析完一部分內容就顯示一部分內容，同時，可能還在通過網絡下載其余內容。

四、瀏覽器渲染優化

① 針對JavaScript：

JavaScript既會阻塞HTML的解析，也會阻塞CSS的解析。因此我們可以對JavaScript的加載方式進行改變，來進行優化：

（1）盡量將JavaScript文件放在body的最后

（2） body中間盡量不要寫<script>標簽

（3）<script>標簽的引入資源方式有三種，有一種就是我們常用的直接引入，還有兩種就是使用 async 屬性和 defer 屬性來異步引入，兩者都是去異步加載外部的JS文件，不會阻塞DOM的解析（盡量使用異步加載）。三者的區別如下：

• script 立即停止頁面渲染去加載資源文件，當資源加載完畢后立即執行js代碼，js代碼執行完畢后繼續渲染頁面；
• async 是在下載完成之后，立即異步加載，加載好后立即執行，多個帶async屬性的標簽，不能保證加載的順序；

? <script async src="script.js"></script>

• defer 是在下載完成之后，立即異步加載。加載好后，如果 DOM 樹還沒構建好，則先等 DOM 樹解析好再執行；如果DOM樹已經準備好，則立即執行。多個帶defer屬性的標簽，按照順序執行。

② 針對CSS：

使用CSS有三種方式：使用link、@import、內聯樣式，其中link和@import都是導入外部樣式。它們之間的區別：

• link：瀏覽器會派發一個新等線程(HTTP線程)去加載資源文件，與此同時GUI渲染線程會繼續向下渲染代碼
• @import：GUI渲染線程會暫時停止渲染，去服務器加載資源文件，資源文件沒有返回之前不會繼續渲染(阻礙瀏覽器渲染)
• style：GUI直接渲染

外部樣式如果長時間沒有加載完畢，瀏覽器為了用戶體驗，會使用瀏覽器會默認樣式，確保首次渲染的速度。所以CSS一般寫在headr中，讓瀏覽器盡快發送請求去獲取css樣式。

所以，在開發過程中，導入外部樣式使用link，而不用@import。如果css少，盡可能采用內嵌樣式，直接寫在style標簽中。

③ 針對DOM樹、CSSOM樹：

可以通過以下幾種方式來減少渲染的時間：

• HTML文件的代碼層級盡量不要太深
• 使用語義化的標簽，來避免不標準語義化的特殊處理
• 減少CSSD代碼的層級，因為選擇器是從左向右進行解析的

④ 減少回流與重繪：

• 操作DOM時，盡量在低層級的DOM節點進行操作
• 不要使用table布局， 一個小的改動可能會使整個table進行重新布局
• 使用CSS的表達式
• 不要頻繁操作元素的樣式，對于靜態頁面，可以修改類名，而不是樣式。
• 使用absolute或者fixed，使元素脫離文檔流，這樣他們發生變化就不會影響其他元素
• 避免頻繁操作DOM，可以創建一個文檔片段documentFragment，在它上面應用所有DOM操作，最后再把它添加到文檔中
• 將元素先設置display: none，操作結束后再把它顯示出來。因為在display屬性為none的元素上進行的DOM操作不會引發回流和重繪。
• 將DOM的多個讀操作（或者寫操作）放在一起，而不是讀寫操作穿插著寫。這得益于瀏覽器的渲染隊列機制。

瀏覽器針對頁面的回流與重繪，進行了自身的優化——渲染隊列

瀏覽器會將所有的回流、重繪的操作放在一個隊列中，當隊列中的操作到了一定的數量或者到了一定的時間間隔，瀏覽器就會對隊列進行批處理。這樣就會讓多次的回流、重繪變成一次回流重繪。

將多個讀操作（或者寫操作）放在一起，就會等所有的讀操作進入隊列之后執行，這樣，原本應該是觸發多次回流，變成了只觸發一次回流。

五、渲染過程中遇到 JS 文件如何處理？

JavaScript 的加載、解析與執行會阻塞文檔的解析，也就是說，在構建 DOM 時，HTML 解析器若遇到了 JavaScript，那么它會暫停文檔的解析，將控制權移交給 JavaScript 引擎，等 JavaScript 引擎運行完畢，瀏覽器再從中斷的地方恢復繼續解析文檔。也就是說，如果想要首屏渲染的越快，就越不應該在首屏就加載 JS 文件，這也是都建議將 script 標簽放在 body 標簽底部的原因。當然在當下，并不是說 script 標簽必須放在底部，因為你可以給 script 標簽添加 defer 或者 async 屬性。

• css的解析和JS的執行都互斥的，css解析的時候js停止執行，js執行的時候css停止解析。
• 無論css阻塞，或js阻塞，都不會阻塞瀏覽器加載外部資源(圖片，視頻，樣式，腳本)。

因為瀏覽始終處于一種“先把請求發送出去”的工作模式，只要涉及到網絡請求的內容，無論是：圖片，樣式，腳本，都會先發送請求去獲取資源，至于資源到本地之后什么時候用，由瀏覽器自己去協調。

• 阻塞瀏覽器渲染
• 阻塞DOM解析
• 阻塞JS執行

六、什么是文檔的預解析？

Webkit 和 Firefox 都做了這個優化，當執行 JavaScript 腳本時，另一個線程解析剩下的文檔，并加載后面需要通過網絡加載的資源。這種方式可以使資源并行加載從而使整體速度更快。需要注意的是，預解析并不改變 DOM 樹，它將這個工作留給主解析過程，自己只解析外部資源的引用，比如外部腳本、樣式表及圖片。

七、CSS 如何阻塞文檔解析？

理論上，既然樣式表不改變 DOM 樹，也就沒有必要停下文檔的解析等待它們。然而，存在一個問題，JavaScript 腳本執行時可能在文檔的解析過程中請求樣式信息，如果樣式還沒有加載和解析，腳本將得到錯誤的值，顯然這將會導致很多問題。所以如果瀏覽器尚未完成 CSSOM 的下載和構建，而我們卻想在此時運行腳本，那么瀏覽器將延遲 JavaScript 腳本執行和文檔的解析，直至其完成 CSSOM 的下載和構建。也就是說，在這種情況下，瀏覽器會先下載和構建 CSSOM，然后再執行 JavaScript，最后再繼續文檔的解析。

八、如何優化關鍵渲染路徑？

什么是關鍵渲染路徑：

瀏覽器將HTML，CSS，JavaScript到首次渲染到屏幕上（首屏），這期間所經歷的一系列步驟，叫做關鍵渲染路徑（Critical Rendering Path）。

可見，通過優化關鍵渲染路徑，我們可以顯著縮短首次渲染頁面的時間，從而得到一個更好的用戶體驗。

什么是關鍵資源：

關鍵資源指的是那些可以阻塞頁面首次渲染的資源。例如JavaScript、CSS都是可以阻塞關鍵渲染路徑的資源，這些資源就屬于關鍵資源。圖片不屬于關鍵資源， 因為圖片不會導致阻塞游覽器渲染。

如何優化關鍵渲染路徑：

為盡快完成首次渲染，我們需要最大限度減小以下三種可變因素：

（1）關鍵資源的數量。

（2）關鍵路徑長度。

（3）關鍵字節的數量。

關鍵資源是可能阻止網頁首次渲染的資源。這些資源越少，瀏覽器的工作量就越小，對 CPU 以及其他資源的占用也就越少。

關鍵資源的長度指的是獲取所有關鍵資源時，在瀏覽器與服務器之間的往返次數。

同樣，關鍵路徑長度受所有關鍵資源與其字節大小之間依賴關系圖的影響：某些資源只能在上一資源處理完畢之后才能開始下載，并且資源越大，下載所需的往返次數就越多。最后，瀏覽器需要下載的關鍵字節越少，處理內容并讓其出現在屏幕上的速度就越快。

要減少字節數，我們可以減少資源數（將它們刪除或設為非關鍵資源），此外還要壓縮和優化各項資源，確保最大限度減小傳送大小。

優化關鍵渲染路徑的常規步驟如下：

（1）對關鍵路徑進行分析和特性描述：資源數、字節數、長度。

（2）最大限度減少關鍵資源的數量：刪除它們，延遲它們的下載，將它們標記為異步等。

（3）優化關鍵字節數以縮短下載時間（往返次數）。

（4）優化其余關鍵資源的加載順序：您需要盡早下載所有關鍵資產，以縮短關鍵路徑長度

九、什么情況會阻塞渲染？

首先渲染的前提是生成渲染樹，所以 HTML 和 CSS 肯定會阻塞渲染。如果你想渲染的越快，你越應該降低一開始需要渲染的文件大小，并且扁平層級，優化選擇器。然后當瀏覽器在解析到 script 標簽時，會暫停構建 DOM，完成后才會從暫停的地方重新開始。也就是說，如果你想首屏渲染的越快，就越不應該在首屏就加載 JS 文件，這也是都建議將 script 標簽放在 body 標簽底部的原因。

當然在當下，并不是說 script 標簽必須放在底部，因為你可以給 script 標簽添加 defer 或者 async 屬性。當 script 標簽加上 defer 屬性以后，表示該 JS 文件會并行下載，但是會放到 HTML 解析完成后順序執行，所以對于這種情況你可以把 script 標簽放在任意位置。對于沒有任何依賴的 JS 文件可以加上 async 屬性，表示 JS 文件下載和解析不會阻塞渲染。

十、回流與重繪

① 回流與重繪的概念及觸發條件

（1）回流（重排）

當渲染樹中部分或者全部元素的尺寸、結構或者屬性發生變化時，瀏覽器會重新渲染部分或者全部文檔的過程就稱為回流。

下面這些操作會導致回流：

• 頁面的首次渲染
• 瀏覽器的窗口大小發生變化
• 元素的內容發生變化
• 元素的尺寸或者位置發生變化
• 元素的字體大小發生變化
• 激活CSS偽類
• 查詢某些屬性或者調用某些方法
• 添加或者刪除可見的DOM元素

在觸發回流（重排）的時候，由于瀏覽器渲染頁面是基于流式布局的，所以當觸發回流時，會導致周圍的DOM元素重新排列，它的影響范圍有兩種：

• 全局范圍：從根節點開始，對整個渲染樹進行重新布局
• 局部范圍：對渲染樹的某部分或者一個渲染對象進行重新布局

（2）重繪

當頁面中某些元素的樣式發生變化，但是不會影響其在文檔流中的位置時，瀏覽器就會對元素進行重新繪制，這個過程就是重繪。

下面這些操作會導致回流：

• color、background 相關屬性：background-color、background-image 等
• outline 相關屬性：outline-color、outline-width 、text-decoration
• border-radius、visibility、box-shadow

注意： 當觸發回流時，一定會觸發重繪，但是重繪不一定會引發回流。

② 如何避免回流與重繪？

減少回流與重繪的措施：

• 操作DOM時，盡量在低層級的DOM節點進行操作
• 不要使用table布局， 一個小的改動可能會使整個table進行重新布局
• 使用CSS的表達式
• 不要頻繁操作元素的樣式，對于靜態頁面，可以修改類名，而不是樣式。
• 使用absolute或者fixed，使元素脫離文檔流，這樣他們發生變化就不會影響其他元素
• 避免頻繁操作DOM，可以創建一個文檔片段documentFragment，在它上面應用所有DOM操作，最后再把它添加到文檔中
• 將元素先設置display: none，操作結束后再把它顯示出來。因為在display屬性為none的元素上進行的DOM操作不會引發回流和重繪。
• 將DOM的多個讀操作（或者寫操作）放在一起，而不是讀寫操作穿插著寫。這得益于瀏覽器的渲染隊列機制。

瀏覽器針對頁面的回流與重繪，進行了自身的優化——渲染隊列

瀏覽器會將所有的回流、重繪的操作放在一個隊列中，當隊列中的操作到了一定的數量或者到了一定的時間間隔，瀏覽器就會對隊列進行批處理。這樣就會讓多次的回流、重繪變成一次回流重繪。

上面，將多個讀操作（或者寫操作）放在一起，就會等所有的讀操作進入隊列之后執行，這樣，原本應該是觸發多次回流，變成了只觸發一次回流。

③ 如何優化動畫？

對于如何優化動畫，我們知道，一般情況下，動畫需要頻繁的操作DOM，就就會導致頁面的性能問題，我們可以將動畫的position屬性設置為absolute或者fixed，將動畫脫離文檔流，這樣他的回流就不會影響到頁面了。

十一、style樣式的渲染

style標簽中的樣式由html解析器進行解析

style 標簽里的樣式是異步解析的，容易產生“閃屏”現象，瀏覽器加載資源是異步的，邊加載邊渲染

1、style標簽不會阻止DOM的解析,但是會阻止頁面的渲染

2、遇到耗時任務，style標簽內容過多，再開啟一個html解析器進行解析。

Tips: style中的樣式不解析完畢，頁面不會渲染。

style：內聯

一進頁面，就看見最初的樣子，所有的加載過程都可以看見（過程都看出來）

十二、link引入

link：瀏覽器會派發一個新等線程(HTTP線程)去加載資源文件，與此同時GUI渲染線程會繼續向下渲染代碼

1、遇到link，使用css解析器解析異步解析，接著解析下面的html。

2、等待圖片和樣式都加載完畢，計算樣式，繪制頁面。只有css解析完成工作才會繪制頁面。

3、遇到link，使用css解析器解析異步解析，接著解析下面的html。

通過link引入，樣式解析，計算都會造成阻塞。

總結

1、link進來的樣式，由css解析器去解析，并且是同步解析的。

2、css解析器會阻塞頁面的渲染。(link引入的外部樣式會阻塞頁面渲染)，不會阻塞DOM解析

3、推薦使用link引入樣式。

link：外鏈

一進頁面先空白，因為這個時候在請求資源、解析，等著 Stylesheet 解析完了，統一渲染，只看見最終結果

所以我們一般用 link 外鏈，只向用戶顯示最終結果

總結

以上是生活随笔為你收集整理的【浏览器渲染原理】步骤及优化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。