动画性能优化实用方法整理

来源：互联网发布：按摩棒知乎编辑：程序博客网时间：2024/05/20 19:49

一、动画性能优化原理简述

【页面渲染过程】

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会造成过大的内存消耗，特别对移动端性能影响较大，注意适度使用

二、可用优化方法整理

1.【减少重排/重绘】DOM 的多个读操作（或多个写操作），应该放在一起。不要两个读操作之间，加入一个写操作。

2.【减少重排】如果某个样式是通过重排得到的，那么最好缓存结果。避免下一次用到的时候，浏览器又要重排。

3.【减少重排/重绘】不要一条条地改变样式，而要通过改变class，或者csstext属性，一次性地改变样式。

4.【减少重排/重绘】尽量使用离线DOM，而不是真实的网面DOM，来改变元素样式。比如，操作Document Fragment对象，完成后再把这个对象加入DOM。再比如，使用 cloneNode() 方法，在克隆的节点上进行操作，然后再用克隆的节点替换原始节点。

5.【减少重排/重绘】先将元素设为display: none（需要1次重排和重绘），然后对这个节点进行100次操作，最后再恢复显示（需要1次重排和重绘）。这样一来，你就用两次重新渲染，取代了可能高达100次的重新渲染。

6.【生成独立的RenderLayer】position属性为absolute或fixed的元素，重排的开销会比较小，因为不用考虑它对其他元素的影响。

7.【减少重排/重绘】只在必要的时候，才将元素的display属性为可见，因为不可见的元素不影响重排和重绘。另外，visibility : hidden的元素只对重绘有影响，不影响重排。

8.使用虚拟DOM的脚本库，比如React等。

9.使用 window.requestAnimationFrame()、window.requestIdleCallback() 这两个方法调节重新渲染，优化js动画

10.【减少重排】left/top->translate width/height->scale,rotate,opacity

11.【生成独立的GraphicsLayer】尽可能多的利用硬件能力，开启GPU加速

12.尽可能少的使用box-shadows与gradients，二者过于耗性能

*动画性能优化方法持续整理中......

文章整理自：

http://www.open-open.com/lib/view/open1475128810681.html

http://www.xuanfengge.com/css3-animations.html

http://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html

0 0