寫在前面
在討論回流和重繪之前躬它，我們要知道：
- 回流和重繪都是瀏覽器的行為。
- 瀏覽器使用流式布局模型(Flow Based Layout)展父。
- 瀏覽器會把
HTML解析成DOM敢朱，把CSS解析成CSSOM唉窃，DOM和CSSOM合并就產(chǎn)生了Render Tree耙饰。 - 有了
Render Tree，我們就知道了所有節(jié)點(diǎn)的樣式纹份，可以計(jì)算出元素在網(wǎng)頁中的大小和位置苟跪，最后把節(jié)點(diǎn)繪制到頁面上。 - 由于瀏覽器使用了流式布局蔓涧，對
Render Tree的計(jì)算通常只需要遍歷一次就可以完成件已，但是table及其內(nèi)部元素除外，他們可能需要多次計(jì)算元暴，通常要花3倍于同等元素的時(shí)間篷扩，這也是為什么要避免使用table布局的原因之一。
一句話總結(jié)：回流必會引起重繪茉盏，重繪不一定會引起回流鉴未。
回流(reflow)
當(dāng)Render Tree中部分或全部元素的尺寸、結(jié)構(gòu)鸠姨、或某些屬性發(fā)生改變時(shí)铜秆，瀏覽器重新選擇部分或全部文檔的過程稱為回流。
會導(dǎo)致回流的操作：
- 頁面首次渲染
- 瀏覽器窗口大小發(fā)生改變
- 元素尺寸或位置發(fā)生改變
- 元素內(nèi)容變化（文字?jǐn)?shù)量或圖片大小等等）
- 元素字體大小變化
- 添加或者刪除可見的
DOM元素 - 激活
CSS偽類（例如：:hover) - 查詢某些屬性或調(diào)用某些方法
一些常用且會導(dǎo)致回流的屬性或方法：
-
clientWidth讶迁、clientHeight连茧、clientTop、clientLeft -
offsetWidth巍糯、offsetHeight啸驯、offsetTop、offsetLeft -
scrollWidth祟峦、scrollHeight罚斗、scrollTop、scrollLeft -
scrollIntoView()搀愧、scrollIntoViewIfNeeded() getComputedStyle()getBoundingClientRect()scrollTo()
重繪(repaint)
當(dāng)頁面中元素樣式的改變并不影響它在文檔流中的位置時(shí)（例如： color惰聂、background-color疆偿、visibility等），瀏覽器會將新樣式賦予給元素并重新繪制它搓幌，這個(gè)過程稱為重繪杆故。
