Lottie动画非常出色，但可能会对页面性能产生负面影响。以下是我用来优化Lottie动画以减少对网页性能影响的一些技巧。
网络上SVG动画的缺点 #
当你使用After Effects中的Bodymovin (opens new window)插件生成一个Lottie动画时，你实际上是在生成一个包含大量JSON代码的文件。这些JSON代码会被转换为页面上的DOM元素。
简单来说：DOM元素就是你在HTML中看到的标签：
,,
这些标签都被视为DOM元素。总之：这个过程允许设计师（通常负责创建这些文件）创建这些文件。 最近我们进行了一次Google Lighthouse (opens new window)性能审核。审核显示我们的页面上有超过2,000个DOM元素。当我们移除一个从创意机构收到的相当标准的Lottie动画文件时，DOM元素减少到不到600个。
当页面上有超过1,500个DOM元素时，Lighthouse会降低您的性能评分并显示以下警告：
页面上的DOM元素过多会影响最大内容绘制时间（LCP）指标，这是Lighthouse中非常重要的指标。
页面上的元素越多，就需要解析和管理的项目越多。
这会累积起来，您可以在此截图中看到我们的性能评分受到了影响：
性能评分为79/100。还有提升的空间。
附注： 我找不到一个好的方法来测试Lottie动画中有多少元素，所以在这里是关于这个问题的内容。 我最终做了以下事情：
- 从Bodymovin生成演示文件并在浏览器中运行。
- 然后在控制台中输入_document.querySelectorAll("*").length;
这将为您提供动画中的总元素数。 这个数字并不完全准确，但对于测试目的来说，它作为一个基准非常有效。
在从Bodymovin生成的demo.html页面的控制台中输入此内容。
**附注2：**这在文章中提及得比较晚，但我非常喜欢Figma >> AEUX >> After Effects >> Bodymovin >> Lottie的SVG动画工作流程。这简直太棒了，优点远远大于缺点 - 本文只是介绍如何减少缺点。
3个优化要点 #
要进行优化，基本上您需要检查3个方面：
- 嵌套和展开
- 缩放
- 实例。
嵌套和展开：
尽量在Figma中取消组合图层，并在可能时将文件压缩。
Figma文件中的每个组件/帧/组都是AEUX的导出/导入的一部分。
Multip 在Figma中如何填充形状？每个都会在AE中添加并导出到CSS。
12个具有相同填充的矢量路径？在AE中将它们添加到一个形状层中，只使用一个填充。
尽可能减少蒙版等。目标是尽可能高效。
A)看到这些图层中的每一个吗？
B)它们可以合并成一个单一的形状层在AE中。
缩放：
您希望将缩放和其他转换为CSS的属性放在尽可能高的图层上。
假设您有5个形状在一个形状层中。如果每个形状都缩放到300％，则每个形状都会有自己的CSS转换。
将所有图层缩小到100％，然后将父形状层缩放到300％，可将其减少80％，结果是相同的视觉效果，只有一个单一的转换。
实例：
如果在动画中使用相同的图形元素，请尝试重复使用它们 - （查看截图：第7和第6帧完全相同，但分别导出）。AEUX导入每个组件 在After Effects中，Frame 7和Frame 6是单独的合成，但在视觉上它们是相同的。在这种情况下重复使用元素大大减少了所需元素的数量。
使用这些策略，我们将DOM元素数量从+2,000减少到了约1,400，并提高了Google Lighthouse性能评分。 还要注意文件大小减少了约60%左右。
性能评分更好 — 从79提高到99。这是一个爆炸性的进步。
请注意，文件大小从第一个文件到最后一个文件都有所减少，大约减少了60%。
这是我制作的一个视频，详细介绍了这个示例，并演示了这些优化。我非常喜欢类似这样的图形和工作流程优化技巧 — 如果有人想深入了解，请告诉我！