css 的重绘与回流
- 什么是重绘?
- 页面发生样式的改变但是不会影响他的位置(例如:字体,背景颜色等等)
- 什么是回流(重排)?
- 因为元素的规模尺寸、布局、隐藏等改变时,也就是位置发生改变时,浏览器会重新渲染这个DOM的这一过程称为回流. (回流肯定伴随着重绘,但是重绘不一定会有回流的出现)
- 什么时候会触发回流(重排)或重绘？
- 增删dom元素的时候,改变元素位置,改变元素样式宽高大小,页面第一次渲染,浏览器窗口的改变,获取元素的宽高也会出发回流
- 如何减少重绘和回流（重排）?
- 在DOM树的最后一个元素改变class,避免设置多层内联样式,避免使用table布局,对于第一次不需要显示的内容设置display:none;开启CSS3硬件加速
如下几个css属性可以触发硬件加速： - transform, opacity, filter, will-change