渲染程序
瀏覽器渲染程序如下：
- 決議 HTML，生成 DOM 樹，決議 CSS，生成 CSSOM 樹，
- 將 DOM 樹和 CSSOM 樹結合，生成渲染樹(Render Tree)，
- Layout(回流): 根據生成的渲染樹，進行回流(Layout)，得到節點的幾何資訊（位置，大小），
- Painting(重繪): 根據渲染樹以及回流得到的幾何資訊，得到節點的絕對像素，
- Display: 將像素渲染到螢屏上，
阻塞問題：
-
構建 CSSOM 會阻塞瀏覽器渲染，但不會阻塞決議 HTML 構建 DOM樹，
-
JavaScript 會阻塞 DOM 樹構建，
當 HTML 決議器遇到一個 script 標簽時，它會暫停構建 DOM，將控制權移交給 JavaScript 引擎；等 JavaScript 引擎運行完畢，瀏覽器會從中斷的地方恢復 DOM 構建，
-
JavaScript 可以查詢和修改 DOM 與 CSSOM，會導致競態問題，
瀏覽器尚未完成 CSSOM 的下載和構建，而我們卻想在此時運行 JavaScript，會怎樣？答案很簡單，對性能不利：瀏覽器將延遲執行 JavaScript 和 DOM 構建，直至其完成 CSSOM 的下載和構建，
異步腳本
-
攜帶
defer屬性的腳本，順序執行，會在DOMContentLoaded事件觸發之前執行，標準里
defer是順序執行，但因為瀏覽器可能并未按照標準實作，所以現實情況不一定是順序執行， -
攜帶
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
}
脫離檔案流
對于會頻繁修改屬性的元素，可以使其脫離檔案流，這樣可以最小化回流和重繪，因為脫離了檔案流，修改不會影響檔案流整體，
- 設定 display 為 none
- 設定 position 為 absolute、fixed
- ...
GPU 加速繪制，提升為合成層
所有的元素會在 Composite 進行渲染層合并，即形成層疊背景關系的元素會渲染在不同的渲染層中，
但一個渲染層滿足以下條件會被提升為合成層，由硬體加速繪制：
- 3D transform: translate3d、translateZ
- video、canvas、iframe 等元素
- will-change
- ...
對于影片可以使用 transform 和 opacity 屬性，會跳過上面五個步驟中的Layout、Paint，不觸發回流重繪，但影片的其它屬性，比如 background-color 這些，還是會引起回流重繪，
具體內容參考文章無線性能優化：Composite
參考
- Rendering Performance
- 你真的了解回流和重繪嗎
- Render-tree Construction, Layout, and Paint
- What forces layout / reflow
- 無線性能優化：Composite
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/24730.html
標籤：其他
上一篇：佇列的實作
下一篇：最大矩形