一、动画性能优化原理简述
1.javascript/css设置动画或变换
2.【计算样式】
根据css选择器,对每个DOM元素匹配对应的CSS样式。
从而确定每个DOM元素上应该应用什么CSS样式规则。
3.【布局】
计算每个DOM元素最终在屏幕上显示的大小和位置。
4.【绘制】
本质上就是填充像素的过程。
包括绘制文字、颜色、图像、边框和阴影等,也就是一个DOM元素所有的可视效果。
一般来说,这个绘制过程是在多个层上完成的。
5.【渲染层合并】
在每个层上完成绘制过程之后,浏览器会将所有层按照合理的顺序合并成一个图层,
然后在屏幕上呈现。
1.调整窗口大小
2.改变字体
3.增加或者移除样式表
4.内容变化
5.激活CSS伪类
6.操作CSS属性
7.JavaScript操作DOM
8.计算 offsetWidth和 offsetHeight
9.设置 style 属性的值
10.CSS3 Animation或Transition
【导致重绘的因素】
1.页面首次加载
2.DOM元素添加、修改(内容)和删除(Reflow + Repaint)
3.仅修改DOM元素的颜色
4.应用新的样式或修改任何影响元素外观的属性
5.Resize浏览器窗口和滚动页面
6.读取元素的某些属性( offsetLeft、 offsetTop、 offsetHeight、 offsetWidth、 getComputedStyle() 等)
优化点一:减少重排、重绘
注:动画效果优选transform、opacity属性,因为二者不会造成页面的重排或重绘。
【生成独立RenderLayer的情况】
1.页面的根节点的RenderObject
2.有明确的CSS定位属性( relative , absolute 或者 transform )
3.是透明的
4.有CSS overflow、CSS alpha遮罩(alpha mash)或者CSS reflection
5.有CSS 滤镜(fliter)
6.3D环境或者2D加速环境的canvas元素对应的RenderObject
7.video元素对应的RenderObject
【生成独立GraphicsLayer的情况】
1.有3Dtransform或者perspective的CSS属性的层
2.使用加速视频解码的video元素的层
3.3D或者加速2D环境下的canvas元素的层
4.插件,比如flash
5.对 opacity 和 transform 应用了CSS动画的层
6.使用了加速CSS滤镜(filters)的层
7.有合成层后代的层
8.同合成层重叠,且在该合成层上面(z-index)渲染的层
9.有backface-visibility属性的层
10.will-change:transform的层
优化点二:生成独立的RenderLayer(防止动画效果引起页面其他元素的重排)、GraphicsLayer(启用多缓存加速合成)
注:过多的GraphicsLayer会造成过大的内存消耗,特别对移动端性能影响较大,注意适度使用
二、可用优化方法整理
display: none
(需要1次重排和重绘),然后对这个节点进行100次操作,最后再恢复显示(需要1次重排和重绘)。这样一来,你就用两次重新渲染,取代了可能高达100次的重新渲染。
absolute
或fixed
的元素,重排的开销会比较小,因为不用考虑它对其他元素的影响。
visibility : hidden
的元素只对重绘有影响,不影响重排。