寫在前面
在討論回流和重繪之前，我們要知道：
- 回流和重繪都是瀏覽器的行為。
- 瀏覽器使用流式布局模型(Flow Based Layout)。
- 瀏覽器會把
HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并就產生了Render Tree。 - 有了
Render Tree，我們就知道了所有節點的樣式，可以計算出元素在網頁中的大小和位置，最后把節點繪制到頁面上。 - 由于瀏覽器使用了流式布局，對
Render Tree的計算通常只需要遍歷一次就可以完成，但是table及其內部元素除外，他們可能需要多次計算，通常要花3倍于同等元素的時間，這也是為什么要避免使用table布局的原因之一。
一句話總結：回流必會引起重繪，重繪不一定會引起回流。
回流(reflow)
當Render Tree中部分或全部元素的尺寸、結構、或某些屬性發生改變時，瀏覽器重新選擇部分或全部文檔的過程稱為回流。
會導致回流的操作：
- 頁面首次渲染
- 瀏覽器窗口大小發生改變
- 元素尺寸或位置發生改變
- 元素內容變化（文字數量或圖片大小等等）
- 元素字體大小變化
- 添加或者刪除可見的
DOM元素 - 激活
CSS偽類（例如：:hover) - 查詢某些屬性或調用某些方法
一些常用且會導致回流的屬性或方法：
-
clientWidth、clientHeight、clientTop、clientLeft -
offsetWidth、offsetHeight、offsetTop、offsetLeft -
scrollWidth、scrollHeight、scrollTop、scrollLeft -
scrollIntoView()、scrollIntoViewIfNeeded() getComputedStyle()getBoundingClientRect()scrollTo()
重繪(repaint)
當頁面中元素樣式的改變并不影響它在文檔流中的位置時（例如： color、background-color、visibility等），瀏覽器會將新樣式賦予給元素并重新繪制它，這個過程稱為重繪。
