從瀏覽器渲染過程看重繪迴流

時間 2020-01-27

標籤瀏覽器渲染過程看重迴流欄目瀏覽器简体版

原文原文鏈接

渲染過程

瀏覽器渲染過程以下：git

解析 HTML，生成 DOM 樹，解析 CSS，生成 CSSOM 樹。
將 DOM 樹和 CSSOM 樹結合，生成渲染樹(Render Tree)。
Layout(迴流): 根據生成的渲染樹，進行迴流(Layout)，獲得節點的幾何信息（位置，大小）。
Painting(重繪): 根據渲染樹以及迴流獲得的幾何信息，獲得節點的絕對像素。
Display: 將像素渲染到屏幕上。

阻塞問題：github

構建 CSSOM 會阻塞瀏覽器渲染，但不會阻塞解析 HTML 構建 DOM樹。web
JavaScript 會阻塞 DOM 樹構建。canvas

當 HTML 解析器遇到一個 script 標籤時，它會暫停構建 DOM，將控制權移交給 JavaScript 引擎；等 JavaScript 引擎運行完畢，瀏覽器會從中斷的地方恢復 DOM 構建。瀏覽器
JavaScript 能夠查詢和修改 DOM 與 CSSOM，會致使競態問題。緩存

瀏覽器還沒有完成 CSSOM 的下載和構建，而咱們卻想在此時運行 JavaScript，會怎樣？答案很簡單，對性能不利：瀏覽器將延遲執行 JavaScript 和 DOM 構建，直至其完成 CSSOM 的下載和構建。性能優化

異步腳本異步

攜帶 defer屬性的腳本，順序執行，會在DOMContentLoaded 事件觸發以前執行。async

標準裏defer是順序執行，但由於瀏覽器可能並未按照標準實現，因此現實狀況不必定是順序執行。ide
攜帶 async屬性的腳本，亂序執行，會在loaded 事件觸發以前執行。

像素管道(pixel pipeline)

瀏覽器 60 幀刷新率中的每一幀，像素至屏幕管道中的關鍵點能夠分爲 5 個步驟。

JavaScript： JavaScript 修改 DOM 和 CSS。好比用 JavaScript 實現動畫。
樣式計算：根據匹配選擇器（例如 .headline 或 .nav > .nav__item）計算出元素的 CSS 規則並計算每一個元素的最終樣式。
佈局(迴流)：瀏覽器開始計算元素要佔據的空間大小及其在屏幕的位置。網頁的佈局模式意味着一個元素可能影響其餘元素，例如 <body> 元素的寬度通常會影響其子元素的寬度以及樹中各處的節點。
繪製（重繪）：繪製是填充像素的過程。它涉及繪出文本、顏色、圖像、邊框和陰影，基本上包括元素的每一個可視部分。繪製通常是在多個表面（一般稱爲層）上完成的。
合成：因爲頁面的各部分可能被繪製到多層，由此它們須要按正確順序繪製到屏幕上，以便正確渲染頁面。對於與另外一元素重疊的元素來講，這點特別重要，由於一個錯誤可能使一個元素錯誤地出如今另外一個元素的上層。

跳過 Layout 和 Paint

更改一個既不要佈局也不要繪製的屬性，則瀏覽器將跳過 Layout 和 Paint，只執行 Composite。

跳過 Layout

若是隻修改 paint only 屬性（例如背景圖片、文字顏色或陰影等），即不會影響頁面佈局的屬性，瀏覽器會跳過 Layout 過程，但仍將執行 Paint。

這個過程就是瀏覽器重繪。

無跳過

若是修改元素的 layout 屬性，也就是改變了元素的幾何屬性（例如寬度、高度、左側或頂部位置等），瀏覽器會檢查全部其餘元素，而後自動重排頁面。任何受影響的部分都須要從新繪製，並且最終繪製的元素需會進行合成。

這個過程就是觸發迴流和重繪。

經過上面的描述能夠知道，觸發重繪不必定會觸發迴流，但觸發迴流必定會觸發重繪。

瀏覽器優化

瀏覽器爲了不在一幀的時間裏頻繁的觸發迴流和重繪過程，會將屢次迴流、重繪彙總成一次進行處理。通常是將回流、重繪操做推入一個隊列中，直到隊列達到閾值或者須要執行時，纔會清空隊列。

強制迴流

執行獲取佈局信息的操做，爲了獲取正確的數據，瀏覽器會清空隊列，觸發迴流重繪。

讀取如下屬性或者使用如下方法會致使強制迴流：

offsetTop、offsetLeft、offsetWidth、offsetHeight
scrollTop、scrollLeft、scrollWidth、scrollHeight
clientTop、clientLeft、clientWidth、clientHeight
getComputedStyle()
getBoundingClientRect()
...

減小回流重繪

避免強制迴流

對於頻繁讀取佈局信息的操做，可使用requestAnimationFrame()，將操做聚集起來並延遲入隊，由於requestAnimationFrame()是在每一幀重繪前執行的。

具體查看MDN_requestAnimationFrame

或者將值緩存起來也是能夠的。

// 頻繁讀取佈局信息會致使強制迴流
for (let i = 0; i < arr.length; i++) {
  arr[i].style.padding = el.style.clientWidth + '5px';
  // do something
}
  
// 緩存
let width = el.style.clientWidth;
for (let i = 0; i < arr.length; i++) {
  arr[i].style.padding = width + '5px';
  // do something
}

脫離文檔流

對於會頻繁修改屬性的元素，可使其脫離文檔流，這樣能夠最小化迴流和重繪。由於脫離了文檔流，修改不會影響文檔流總體。