页面的重排和重绘
浏览器编译页面分为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
推荐阅读
- 使用协程爬取网页，计算网页数据大小
- 青春的恋习曲
- 分享！如何分分钟实现微信扫二维码调用外部浏览器打开指定页面的功能
- web网页模板|如此优秀的JS轮播图，写完老师都沉默了
- Android实现主页底部菜单中间tab图案凸起
- mysql|InnoDB数据页结构
- “首富”一封信，中医半页文
- iOS|iOS runtime应用整理
- 《重生未来之星玉》第二十一章7页
- 微信小程序请求接口格式