重绘和回流

浏览器解析html文件过程
- 浏览器将取到的html代码解析成dom树
- 每个tag都是dom树中的一个节点
- 根结点是document对象
- 浏览器把所有样式解析成样式结构体,解析过程中会去掉浏览器不能识别的样式
- DOM tree和样式结构体组合构建render tree
- render tree不包含隐藏的节点
- visibility:hidden;会影响布局(layout),会占有空间
- 浏览器根据构建好的render tree来绘制页面
回流(reflow)
当render tree中的一部分(或全部),因为元素的规模尺寸、布局、隐藏等改变而需要重新构建,这就是回流(reflow)
重绘(repaints)
当render tree中的一些元素需要更新属性,而这些属性只是影响元素的外观、风格,而不影响布局(例如:background-color),则称为重绘(repaints)
tips:回流必将引起重绘,重绘不一定引起回流,回流比重绘的代价更高;
参考:
https://www.jianshu.com/p/01b9457f44d6