回流与重绘
页面加载过程
dom树->渲染树->页面
回流
构建dom树,影响dom树结构的操作都会引起回流(改变页面布局)
重绘
引起渲染树变化,样式改变,而不影响页面布局的操作都会引起重绘
由于加载过程,dom树先于渲染树,所以回流必定引起重绘,重绘不一定引起回流,所以回流代价远大于重绘。
关于性能
如何减少回流
- DOM的增删行为
尽量少使用document.createElement()创建父节点,使用document.createDocumentFragment()效率更高。
innerhtml方法性能介于两者之间。
- 几何属性的变化
当重复多次修改一些元素的某几个属性时,尽量通过定义类的样式,改变类名的方式去改变样式。
- 元素位置的变化
修改一个元素的左右margin,padding之类的操作,所以在做元素位移的动画,不要更改margin之类的属性,使用定位脱离文档流后改变位置会更好。
- 获取元素的偏移量属性
例如获取一个元素的scrollTop、scrollLeft、scrollWidth、offsetTop、offsetLeft、offsetWidth、offsetHeight之类的属性,浏览器为了保证值的正确也会回流取得最新的值,所以如果你要多次操作,最取完做个缓存。
- 页面初次渲染
这样的回流无法避免
- 浏览器窗口尺寸改变
resize事件发生也会引起回流。