浏览器的渲染过程:
- 解析HTML,生成DOM树,同时解析CSS,生成CSSOM树
- 将DOM树和CSSOM树结合,生成渲染树(Render Tree)
- 回流(Layout):得到节点的几何信息(位置,大小)
- 重绘:根据渲染树以及回流得到的几何信息,得到节点的绝对像素
- 呈现
回流和重绘的区别:
- 当布局和尺寸改变时,会发生回流和重绘
- 只有颜色发生变化时,只会发生重绘
- 回流一定会引起重绘,重绘不一定会引起回流
减少回流和重绘
浏览器优化机制
由于每次回流都会造成额外的计算消耗,因此大多浏览器都会将修改操作放入到队列里,直到过了一段时间或者操作达到了一个阈值,才清空队列,进行批处理。
但是,当使用以下属性和方法时,浏览器不得不进行回流以获取最新的布局信息:
- offsetTop、offsetLeft、offsetWidth、offsetHeight
- scrollTop、scrollLeft、scrollWidth、scrollHeight
- clientTop、clientLeft、clientWidth、clientHeight
- getComputedStyle()
- getBoundingClientRect
自己优化
1. 使用cssText一次性增加或者修改多个样式:
box.style.cssText='background-color:purple;color:white;'
2.利用display:none
由于render tree不会对隐藏的dom元素节点进行渲染,所以我们在批量处理dom元素(比如遍历生成一堆子元素)的时候可以先将其父元素隐藏,然后等处理完后再显示。
3.脱离文档流
回流的触发机制是:布局和尺寸发生改变
因此,我们可以让元素脱离文档流,这种方式可以用在动画元素身上,让其绝对定位。