瀏覽器的渲染性能

AllisonHaka 7年前發布 | 7K 次閱讀 CSS 前端技術

用戶都 希望他們訪問的web應用是可交互且運行流暢的。因此，作為web開發者，你也要在這方面多花點功夫。你所做的頁面，不但要能被快速加載，還要能流暢運行：頁面的滾動要快速響應手指的動作，動畫和交互效果更要如絲般順滑。

要想編寫高性能的web站點或應用，你需要充分了解瀏覽器是如何處理HTML/JavaScript/CSS的，從而確保你寫的代碼（或引用的第三方代碼）是盡可能高效的。

60fps和設備刷新率

當今大多數設備的屏幕刷新率都是 60次/秒 。因此，如果在頁面中有一個動畫或漸變效果，或者用戶正在滑動頁面，那么瀏覽器渲染動畫或頁面的每一幀的速率，也需要跟設備屏幕的刷新率保持一致。

也就是說，瀏覽器對每一幀畫面的渲染工作需要在16毫秒（1秒 / 60 = 16.66毫秒）之內完成。但實際上，在渲染某一幀畫面的同時，瀏覽器還有一些額外的工作要做（比如渲染隊列的管理，渲染線程與其他線程之間的切換等等）。因此單純的渲染工作，一般需要控制在10毫秒之內完成，才能達到流暢的視覺效果。如果超過了這個時間限度，頁面的渲染就會出現卡頓效果，也就是常說的jank，它是很糟糕的用戶體驗。

像素渲染流水線

在編寫web頁面時，你需要理解你所寫的頁面代碼是如何被轉換成屏幕上顯示的像素的。這個轉換過程可以歸納為這樣的一個流水線，包含五個關鍵步驟：

  • JavaScript 。一般來說，我們會使用JavaScript來實現一些視覺變化的效果。比如用jQuery的 animate 函數做一個動畫、對一個數據集進行排序、或者往頁面里添加一些DOM元素等。當然，除了JavaScript，還有其他一些常用方法也可以實現視覺變化效果，比如：CSS Animations, Transitions和Web Animation API。
  • 計算樣式 。這個過程是根據CSS選擇器，比如 .headline 或 .nav > .nav_item ，對每個DOM元素匹配對應的CSS樣式。這一步結束之后，就確定了每個DOM元素上該應用什么CSS樣式規則。
  • 布局 。上一步確定了每個DOM元素的樣式規則，這一步就是具體計算每個DOM元素最終在屏幕上顯示的大小和位置。web頁面中元素的布局是相對的，因此一個元素的布局發生變化，會聯動地引發其他元素的布局發生變化。比如， <body> 元素的寬度的變化會影響其子元素的寬度，其子元素寬度的變化也會繼續對其孫子元素產生影響。因此對于瀏覽器來說，布局過程是經常發生的。
  • 繪制 。繪制，本質上就是填充像素的過程。包括繪制文字、顏色、圖像、邊框和陰影等，也就是一個DOM元素所有的可視效果。一般來說，這個繪制過程是在多個層上完成的。
  • 渲染層合并 。由上一步可知，對頁面中DOM元素的繪制是在多個層上進行的。在每個層上完成繪制過程之后，瀏覽器會將所有層按照合理的順序合并成一個圖層，然后顯示在屏幕上。對于有位置重疊的元素的頁面，這個過程尤其重要，因為一旦圖層的合并順序出錯，將會導致元素顯示異常。

上述過程的每一步中都有發生jank的可能，因此一定要弄清楚你的代碼將會運行在哪一步。

雖然在理論上，頁面的每一幀都是經過上述的流水線處理之后渲染出來的，但并不意味著頁面每一幀的渲染都需要經過上述五個步驟的處理。實際上，對視覺變化效果的一個幀的渲染，有這么三種 常用的 流水線：

1. JS / CSS > 計算樣式 > 布局 > 繪制 > 渲染層合并

瀏覽器的渲染性能

如果你修改一個DOM元素的”layout”屬性，也就是改變了元素的樣式（比如寬度、高度或者位置等），那么瀏覽器會檢查哪些元素需要重新布局，然后對頁面激發一個reflow過程完成重新布局。被reflow的元素，接下來也會激發繪制過程，最后激發渲染層合并過程，生成最后的畫面。

2. JS / CSS > 計算樣式 > 繪制 > 渲染層合并

如果你修改一個DOM元素的“paint only”屬性，比如背景圖片、文字顏色或陰影等，這些屬性不會影響頁面的布局，因此瀏覽器會在完成樣式計算之后，跳過布局過程，只做繪制和渲染層合并過程。

3. JS / CSS > 計算樣式 > 渲染層合并

如果你修改一個非樣式且非繪制的CSS屬性，那么瀏覽器會在完成樣式計算之后，跳過布局和繪制的過程，直接做渲染層合并。

第三種方式在性能上是最理想的，對于動畫和滾動這種負荷很重的渲染，我們要爭取使用第三種渲染流程。

性能優化是一門做減法的藝術。我們首要要盡力簡化頁面渲染過程，然后要使渲染過程的每一步都盡量高效。在很多時候，我們需要跟瀏覽器一起努力來創建高性能web應用，而不是跟瀏覽器對著干。要記住，以上列舉的流水線中的每一步，在時間消耗上是各不相同的，有些步驟是相對更費時的。

接下來，讓我們深入到這個流水線中的每一步去看看。我們會以一些常見問題為例，闡述如何發現和分析這些問題，并嘗試去解決它們。

瀏覽器渲染優化

想深入了解渲染性能嗎？快看看這堂課程吧 它能幫助你了解瀏覽器是如何把HTML/CSS/JavaScript代碼轉換成屏幕上你看到的一個個像素的 如何使用DevTools來測量頁面性能、以及如何優化你的頁面渲染速度。

 

來自：http://www.css88.com/archives/6660

 

 本文由用戶 AllisonHaka 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！