浏览器重排,重绘的区别和优化手段

265 阅读1分钟

1.重绘:一个元素的外观被改变,(背景色,字体颜色,边框颜色等) 会引发浏览器重绘

2.重绘的出发情况

1.添加删除可见DOM元素
2.元素位置发生改变
3.元素尺寸,位置发生改变
4.页面渲染初始化
5.浏览器尺寸改变
6.获取元素计算后的属性如:offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)

3.优化方法

1.尽可能少的操作DOM
2.操作DOM不要一条一条设置,可用classname ,csstext ,多次操作集中一起
3.操作DOM动画的元素可以设置position :abolute ,fixed 使元素脱离文档流
4.不要使用table布局,微笑改变就会引发重排
5.不要在布局信息改变的时候做查询(会导致渲染队列强制刷新)