了解基本知識

1. 瀏覽器采用的是流式布局模型（Flow Based Layout）
2. 瀏覽器會把CSS解析成CSSOM Tree，把HTML解析成 DOM Tree，把這兩個合并成 Render Tree。
3. 有了Render Tree 我們就知道了所有節(jié)點的位置和樣式，瀏覽器就開始計算他們在頁面中的位置，然后開始繪制

回流（Reflow）

我們把Render Tree重新生成的過程我們稱之為回流?；亓饕鸬脑蛴泻芏?，主要是影響布局的操作。

一、影響布局變化的，會導(dǎo)致回流的操作有：

1 頁面初次渲染
2 瀏覽器窗口發(fā)生改變
3 元素尺寸，位置，內(nèi)容發(fā)生變化
4 元素字體大小變化
5 添加或者刪除的可見dom元素
6 激活CSS偽類，例如 :hover

二、查詢某些屬性或調(diào)用某些方法

clientWidth, clientHeight, clientTop, clientLeft,
offsetWidth, offsetHeight, offsetTop, offsetLeft,
scrollWidth, scrollHeight, scrollTop, scrollLeft,
scrollIntorView(), scrollInToViewIfNeeded(),
getComputedStyle(),getBoundingClientRect(),scrollTop
...

重繪（Repaint）

按照renderTree重新渲染的過程，稱之為重繪。回流一定會導(dǎo)致重繪，否則將會引起表現(xiàn)不一致。

我看有很多網(wǎng)上的老舊知識，把過程講的非常啰嗦而且不準(zhǔn)確，就是一個簡單的知識點。