前端动画性能优化原理为什么会存在差距

￡神魔★判官ぃ 2023-02-14 00:29 6阅读 0赞

![format_png][]

--------------------

在当前的前端技术环境下, 我们的前端页面中出现越来越多的动画效果, 为了保证在用户眼中这个动画的一个流畅性, 我们需要在电脑屏幕刷新的时间间隔内就必须完成一帧内容的绘制, 即16ms内必须完成一帧的绘制, 这就对我们前端工程师对于动画的性能优化问题有着较为深入的了解. 今天我们就来探讨一下前端动画性能优化问题。

**前端动画实现的方法**基本分为两大类:

*  一种是利用JavaScript在canvas画布进行动画绘制
 *  一种是利用JavaScript或css来控制元素的位置属性值的变化来实现动画效果

今天我们这里就以css的动画属性——关键帧来作为实现动画的载体，来探讨一下通过改变元素不同的位置属性给动画性能带来的影响。

![format_png 1][]

这两个动画效果在视觉上看完全一样，都是一个元素从上往下移动300px的距离，但是这两个动画对浏览器计算资源的消耗也是一样的吗？

这里我们先来学习chrome开发者工具里的一个模块：performance

![format_png 2][]

该模块可以监控当前页面在某段时间内的性能损耗，帮助我们开发者优化我们的网页的性能，提升用户的实际体验。

### **top值的性能检测** ###

我们先引用demo1来实现用过效果，即通过改变元素的top值来实现元素的位置变化，这是我们可以看看开发者工具给我们提供的性能分析报告，总计算时间约为174.5ms

![format_png 3][]

###     ###

### **translateX值的性能检测** ###

接下来我们来引用demo2来实现用过效果，即通过改变元素的translateY值来实现元素的位置变化，这是我们可以看看开发者工具给我们提供的性能分析报告，总计算时间约为45ms

![format_png 4][]

通过对上面两个不同方法实现动画的性能分析，我们可以清晰的看到，通过CSS3的translate实现的动画性能要远远强于通过定位的top属性值实现的动画。

**那这个原理是什么？为什么会存在这么大的性能差距呢？**

这里我们就要来深究一下浏览器在元素某一位置属性发生变化后到底都做了些什么事情？

### **浏览器渲染步骤** ###

![format_png 5][]

**每个步骤的详细处理内容为：**

*  change（通过JavaScript或CSS改变某个元素的位置属性值）
 *  Style（计算样式）：浏览器确定每个 DOM 元素最终应用哪些 CSS 规则。
 *  Layout（布局）：浏览器计算每个 DOM 元素在最终屏幕上显示的大小和位置。并且整个页面上所有的元素位置都是相对的，所以其中任意一个元素的位置发生变化，都会联动的引起其他元素发生变化，这个过程叫 reflow（重排）。
 *  Paint（绘制）：在多个层上绘制 DOM 元素的的文字、颜色、图像、边框和阴影等。最典型就是background和绝对定位中不同Z-index值的元素。
 *  Composite（渲染层合并）：按照合理的顺序合并图层然后显示到屏幕上。比如讲元素的内容层放在background层之上，同一坐标系下的不同z-index值的元素

在这几个过程中，layout是最耗费时间的一个步骤。

### **分析** ###

那么在以上demo1和demo2这两个动画中到底是哪些环节导致了两者性能存在如此之大的差异呢？  
这个就分析分析两者实现动画的一个过程了，如果是使用position的top值来实现动画效果的话，那就会执行浏览器渲染的所有步骤，但是使用transform的translate的话他会跳过layout的步骤直接执行绘制步骤，这样就能完全省去layout所花费的时间和性能。

### **结论** ###

日后我们在处理前端动画时，对于元素的位移优先选择使用CSS3的translate属性以替代元素的margin、padding、left等属性的运用

![format_png 6][]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9sR2x2b0tIblJVSmJ3OHU5bjFwb3dYOWJ4cXplZHhDYmdsRFFtYUFzOUZ5RVc0dDB2VU90ODlJVnNLY0l6aWJXb2s4bFNqSUtQdDhGSzRzdExJV0hFbFEvNjQw?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9sR2x2b0tIblJVTGo1Y1dmYUlUcjNrZWhYc3dZaWFINmNDbHRJcFptM01TdjRSVUwwZ00wYmljVGI0Y3luU29pYUQ0Z09zb2xsSHVzUkI1M1FMMG15S2Vydy82NDA?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9sR2x2b0tIblJVTGo1Y1dmYUlUcjNrZWhYc3dZaWFINmMzZUZueXYwaWNpYjVKVms4aWIyUDJJcUU3OW1IV0ZlekxLaWFpYTc4bXdMcmF5S01XUVB1YmNQQkFhdy82NDA?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9sR2x2b0tIblJVTGo1Y1dmYUlUcjNrZWhYc3dZaWFINmNPWG4walNsWExyQ2V6bmNUdGljV2IxRHBjaWNRY3lpYTN4NHBnUlhOUWpDQkhlMDN4V0xHb3J1TXcvNjQw?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9sR2x2b0tIblJVTGo1Y1dmYUlUcjNrZWhYc3dZaWFINmNsaWMwY0Z3VUpGQ29vbGNzSm5pYUppY21MUHE3OUpBajhGNHczNlZicks1SWdZNTFuY1hBTkg3bGcvNjQw?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9sR2x2b0tIblJVTGo1Y1dmYUlUcjNrZWhYc3dZaWFINmMwaWJEMWJTWERDQ1haZjRhZGhWN2xZaWFmQVhIek1xdW5VUm5WSGVPZ0RzaWNKTUhJYmdMVHZ3cmcvNjQw?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9sR2x2b0tIblJVSmJ3OHU5bjFwb3dYOWJ4cXplZHhDYm9zd042MFJpYjlyWHlsVllIR0FIMG5kRnBOMzVXbXhKdkxsT3FPR3BuOWljN1QzeFJrYXc4ZFJBLzY0MA?x-oss-process=image/format,png