回流與重繪這兩個詞語經常見到，面試中這兩個詞語的出現的頻率也比較高，每每別人談到回流與重繪時，哦，這個我知道，但是讓我講個因果所以然，好像嗯。。。好像我並不是懂的很徹底

什麽是回流（reflow）？

Render樹中部分或全部元素的尺寸、結構、或某些屬性（如邊距）發生改變時，瀏覽器重新渲染部分或全部文檔的過程稱為回流。

什麽是重繪（repaint）？

當元素的一部分屬性發生改變並不影響它在文檔流中的位置時（如： color, background-color），瀏覽器會將新樣式賦予給元素並重新繪制它，這個過程稱為重繪。

==> 從性能方面解析回流

具體什麽會影響回流？

我們從定義上就知道什麽會影響回流，但是影響回流的因素太多，一兩句話是無法全面概況，下面詳細羅列出影響回流的因素有哪些

1 初次頁面加載時，頁面渲染初始化

2 瀏覽器窗口大小發生改變

3 刪除或添加某個元素

4 改變某個元素對應的屬性（如margin,padding,height,width,border）

5 改變某個元素的內容（如字體大小，文字數量，圖片大小）

6 CSS偽類激活

7 查詢某些屬性或調用某些方法

• clientWidth、clientHeight、clientTop、clientLeft
• offsetWidth、offsetHeight、offsetTop、offsetLeft
• scrollWidth、scrollHeight、scrollTop、scrollLeft
• scrollIntoView()、scrollIntoViewIfNeeded()
• getComputedStyle()
• getBoundingClientRect()
• scrollTo()

回流會造成什麽樣的結果？

如何避免回流？

回流（reflow）與重繪（repaint）