迴流、重繪

參考文章： 迴流(reflow)重繪(repaint)

你真的瞭解迴流和重繪嗎

1. 概念

• 迴流： 當render樹中的一部分或者所有由於大小邊距等問題發生改變而須要重建的過程叫作迴流

• 重繪： 當元素的一部分屬性發生變化，如外觀背景色不會引發佈局變化而須要從新渲染的過程叫作重繪

2. 瀏覽器渲染過程

• 解析HTML，生成DOM樹，解析CSS，生成CSSOM樹
• 將DOM樹和CSSOM樹結合，生成渲染樹(Render Tree)
• Layout(迴流):根據生成的渲染樹，進行迴流(Layout)，獲得節點的幾何信息（位置，大小）
• Painting(重繪):根據渲染樹以及迴流獲得的幾何信息，獲得節點的絕對像素
• Display:將像素髮送給GPU，展現在頁面上。（這一步其實還有不少內容，好比會在GPU將多個合成層合併爲同一個層，並展現在頁面中

（注意：渲染樹只包含可見的節點）

3. 什麼時候發生

• 添加或刪除可見的DOM元素
• 元素的位置發生變化
• 元素的尺寸發生變化（包括外邊距、內邊框、邊框大小、高度和寬度等）
• 內容發生變化，好比文本變化或圖片被另外一個不一樣尺寸的圖片所替代。
• 頁面一開始渲染的時候（這確定避免不了）
• 瀏覽器的窗口尺寸變化（由於迴流是根據視口的大小來計算元素的位置和大小的）

(注意：迴流必定會觸發重繪，而重繪不必定會迴流)