页面的重排和重绘

浏览器编译页面分为5步

处理html生成 DOM（Document Object Model） Tree
处理css生成 CSSOM（CSS Object Model） Tree
DOM树与CSS-DOM树合并为Render树
对Render树进行布局计算
遍历Render树的每一个节点绘制到屏幕

重绘与重排

当DOM变化影响了元素的几何属性（宽、高改变等等）
浏览器此时需要重新计算元素几何属性
并且页面中其他元素的几何属性可能会受影响
这样渲染树就发生了改变，也就是重新构造RenderTree渲染树
这个过程叫做重排（reflow）

如果DOM变化仅仅影响的了背景色等等非几何属性
此时就发生了重绘（repaint）而不是重排
因为布局没有发生改变

触发重排

页面布局和元素几何属性的改变就会导致重排
下列情况会发生重排：

页面初始渲染
添加/删除可见DOM元素
改变元素位置
改变元素尺寸（宽、高、内外边距、边框等）
改变元素内容（文本或图片等）
改变窗口尺寸
不同的条件下发生重排的范围及程度会不同
某些情况甚至会重排整个页面，比如滑动滚动条
以下属性或方法会刷新渲染队列

offsetTop、offsetLeft、offsetWidth、offsetHeight
clientTop、clientLeft、clientWidth、clientHeight
scrollTop、scrollLeft、scrollWidth、scrollHeight
getComputedStyle()（IE中currentStyle）
我们在修改样式过程中，要尽量避免使用上面的属性

---

解决重排：
合并多次改变样式属性的操作；使需要多次改变的元素脱离文档流；在内存中多次操作节点，完成后再添加到文档中去（有动画效果时）；由于display属性为none的元素不在渲染树中，对隐藏的元素操作不会引发其他元素的重排；在需要经常获取那些引起浏览器重排的属性值时，要缓存到变量。

---

原文：https://blog.csdn.net/q1056843325/article/details/53340308