渲染樹：渲染引起會解析HTML文檔來構(gòu)建DOM樹箱亿，也會用CSS解析器解析CSS文檔構(gòu)建CSSOM樹，接下來DOM樹和CSSOM樹關(guān)聯(lián)起來構(gòu)成渲染樹弃秆。
觸發(fā)重排：對DOM的修改引發(fā)了DOM幾何元素的變化届惋，渲染樹需要重新計算。
觸發(fā)重繪：只要visibilty菠赚， outline脑豹， 背景色等屬性導(dǎo)致樣式的變化，是瀏覽器需要根據(jù)新的屬性進(jìn)行繪制衡查。
重繪不一定導(dǎo)致重排瘩欺，重排一定會導(dǎo)致重繪。重排的開銷比重繪大峡捡，減少重排的觸發(fā)可以提升性能击碗。
觸發(fā)重排的操作：
- 頁面第一次渲染
- 瀏覽器窗口尺寸改變
- 元素位置和尺寸發(fā)生改變
- 新增或刪除可見元素
- 內(nèi)容發(fā)生改變（文字?jǐn)?shù)量或圖片大小等）
- 元素字體發(fā)生變化
- 激活css偽類（:hover）
- 設(shè)置style屬性
- 查詢某些屬性或調(diào)用某些方法（offset類[offsetTop, offsetLeft, offsetWidth, offsetHeight], scroll類[scrollTop, scrollLeft, scrollWidth, scrollHeight]筑悴，client類[clientTop, clientLeft, clientWidth, clientHeight]）,調(diào)用方法如们拙，getComputedStyle, currentStyle稍途，因為他們都為求一個“即時性”和“準(zhǔn)確性”。
觸發(fā)重繪的操作：
visibilty砚婆， outline械拍， 背景色等屬性導(dǎo)致樣式的變化。
提升性能装盯，減少重排重繪方法：
- 改變style值的時候坷虑，可以統(tǒng)一修改，用cssText埂奈，不過如果有屬性不能被覆蓋的話迄损，不能用這個
- 批量修改DOM，將需要修改的DOM抽離出來账磺，隱藏元素使它脫離文檔流芹敌，用文檔片段Fragment來進(jìn)行修改
- 緩存布局信息
- 避免大量使用hover
- 動畫使用絕對定位，提出文檔流
