重绘和回流

浏览器解析html文件过程




  1. 浏览器将取到的html代码解析成dom树
  2. 每个tag都是dom树中的一个节点
  3. 根结点是document对象
  4. 浏览器把所有样式解析成样式结构体,解析过程中会去掉浏览器不能识别的样式
  5. DOM tree和样式结构体组合构建render tree
  6. render tree不包含隐藏的节点
  7. visibility:hidden;会影响布局(layout),会占有空间
  8. 浏览器根据构建好的render tree来绘制页面


回流(reflow)


当render tree中的一部分(或全部),因为元素的规模尺寸、布局、隐藏等改变而需要重新构建,这就是回流(reflow)


重绘(repaints)


当render tree中的一些元素需要更新属性,而这些属性只是影响元素的外观、风格,而不影响布局(例如:background-color),则称为重绘(repaints)


tips:回流必将引起重绘,重绘不一定引起回流,回流比重绘的代价更高;







参考:

https://www.jianshu.com/p/01b9457f44d6


确认 取消