1. 重排和重繪概念
- 瀏覽器下載完頁面中的所有組件（HTML,CSS,JavaScript,圖片）之后會解析生成兩個內(nèi)部數(shù)據(jù)結(jié)構(gòu)（DOM樹和渲染樹）
- DOM樹表示頁面結(jié)構(gòu)叶圃，渲染樹表示DOM節(jié)點如何顯示光绕，
-
重排是DOM元素的幾何變化，DOM樹結(jié)構(gòu)變化缆瓣，渲染樹需要重新計算
4.重繪是當(dāng)頁面中的元素樣式的改變并不影響它在文檔流中的位置，比如改變背景，顏色赏表，字體等等氢橙，瀏覽器會根據(jù)元素的新屬性重新繪制酝枢，使元素呈現(xiàn)新的外觀，由于瀏覽器的流布局悍手，對渲染樹的計算通常只需要遍歷一次就可以完成帘睦，但是table及其內(nèi)部元素除外袍患，它可能需要多次計算才能確定好其在渲染樹中的節(jié)點屬性，比同元素要多花兩倍時間官脓，因此盡量避免使用table布局
2. 觸發(fā)重排的情況
- 頁面渲染初始化時候 协怒，
- 瀏覽器尺寸變化時，
- 元素尺寸發(fā)生改變
- 元素位置發(fā)生改變
- 元素內(nèi)容發(fā)生改變
- 添加或者刪除可見的DOM元素
3.常見的觸發(fā)重繪的屬性
| color | border-style | visibility | background |
|---|---|---|---|
| text-decoration | background-image | background-position | background-repeat |
| outline-color | outline | outline-style | border-radius |
| outline-width | box-shadow | background-size |
4. 性能優(yōu)化
- 減少DOM訪問卑笨，講多次改變樣式屬性操作合并成一次操作
- 如果需要批量操作DOM孕暇，可以先讓元素脫離文檔流，操作完在帶入文檔流赤兴，這樣只會觸發(fā)一次重排（fragment元素的應(yīng)用）
- 由于display:none的元素不再渲染樹中妖滔，對隱藏的元素操作不會引起其他元素的重排
- 在內(nèi)存中多次操作節(jié)點完成之后添加到文檔中
- 盡量不要在布局信息改變時做查詢操作（會導(dǎo)致渲染隊列強(qiáng)制刷新）
6.需要多次重排的元素，使用position：absolute或者fixed桶良，使其脫離文檔流
參考文檔：[深入理解瀏覽器的重繪與重排]:https://blog.csdn.net/lhjuejiang/article/details/79793331
[影響瀏覽器重繪和重排]:http://www.cnblogs.com/yuri2016/p/6542625.html
