Get best of the week

CSS动画性能分析

如何选择动画网页元素？JavaScript还是CSS？有一天，这个问题将被迫问到每个Web开发人员。也许-而且不是一次。

JavaScript程序员已经创建了许多用于浏览器动画的库。似乎每个人都倾向于将这些库用作现成的动画解决方案。但是，让我们放慢脚步。这是对的吗？是否应该使用JavaScript为网页元素设置动画？也许您可以依靠标准CSS机制来实现高质量和高性能的动画？



既然您正在阅读本文，我可以假定您熟悉JavaScript动画。因此，我建议以各种表现形式探讨CSS动画的主题，并且-我建议谈论这种动画的性能。

一般信息


CSS动画基于某些元素属性。其中，应注意以下几点：

  • 一个属性position，在特定的，可以采取的价值观absolute和relative。
  • 财产transform。
  • 财产opacity。
  • 属性left，right，top，bottom。

首先，请看几个使用各种CSS属性为元素设置动画的试点项目。

这是一个项目，其中带有标识符（animate其属性position设置为值）的元素被设置为动画absolute。所述元素的属性top和有可能发生变化left。


试点项目页面

下面是实现此动画的代码。

#animate {
    position: absolute;
    top: 100px;
    left: 30px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: red;

    animation: move 3s ease infinite;
}

@keyframes move {
    50% {
        top: 200px;
        left: 130px;
    }
}

这是一个使用CSS属性实现相同动画的项目transform。

此动画由以下代码表示：

#animate {
    position: absolute;
    top: 100px;
    left: 30px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: red;

    animation: move 3s ease infinite;
}

@keyframes move {
    50% {
        transform: translate(100px, 100px);
    }
}

让我们使用这些项目来得出有关CSS动画的性能以及用于实现它们的系统资源的结论。

如果仅查看项目页面，则可以使用相同的方法来决定在项目中实现的内容，尽管使用的方法不同。但是，如果您使用Chrome开发人员工具衡量这些项目的性能，结果发现它们是不同的。

浏览器如何显示页面？


在深入研究性能研究之前，我们需要了解浏览器如何显示页面，以及页面上发生任何更改时应采取的措施。

这就是页面输出过程的样子。


页面输出

考虑此图中反映的事件。

  1. Recalculate Style -计算要应用于元素的样式。
  2. Layout -创建元素的布局及其在页面上的位置。
  3. Paint-填充已创建图层的像素，即-为每个图层创建光栅图像。GPU将使用这些图像显示页面。
  4. Composite Layer-布局图层并在屏幕上显示它们。结果将是完成的页面。

事件Composite Layer只是CPU与GPU通信以创建动画的时间。使用transform和opacity这样的CSS属性，我们可以将生成动画的负担从CPU转移到GPU。

动画和GPU


GPU本质上是用于处理图像的专用计算机。它可以有效地处理大量图形信息。

结果，当事件发生时Composite Layer，将创建一个附加层。通过这种机制，您可以避免重新渲染动画元素和其他界面元素。

查看下图，您可能会认为动画元素位于同一层上。


动画元素（原始）

但是，如果您将图层视为位于三维空间中，则可以看出，当使用 transform属性实现动画时，会为红色圆圈创建一个附加图层。这使得可以输出高性能的平滑动画。


已为动画对象创建了一个附加层（原始），

GPU将渲染对象树保留在内存中，并且无需重新渲染即可将相应的层放置在其他层之上。在使用属性top和设置对象动画的情况下left，由于属性的更改，将一次又一次渲染同一图层。如果您对这些CSS属性的行为感兴趣，则会发现顶部和左侧会影响页面布局，这导致需要重新渲染页面并重新排列图层。


使用属性的动画转换并使用顶部和左侧属性

该图使您可以看到使用属性translate和属性实现的动画与top和之间的严重差异left。

对于使用top和创建的动画left，圆会在每个位置渲染，直到到达极限位置。之后，他开始移动到起始位置。

以下显示了PerformanceChrome开发者工具栏，其中包含有关动画处理的详细信息。


使用translation属性的动画（原版）


使用top和left属性（原始）进行动画处理

如果您查看面板中显示的有关各个任务的详细信息Performance，我们可以得出结论，这些任务中执行了不同的动作。因此，对于顶部/左侧动画，该任务将执行样式的重新计算，层的布局，更新层的树，创建布局和渲染。对于平移动画，GPU解决的唯一任务是在不输出任何内容到DOM的情况下移动图层。

结果，由于使用了强大的GPU功能，因此使用了平移动画，从而释放了主线程。这样可以提高应用程序性能。顶部/左侧动画的使用导致主线程上的大量额外负载。


由上移动画（左）和顶部/左侧动画（右）（原始）创建的主流负载上

图清楚地说明了在执行顶部/左侧动画时落在主流上的负载。这是不断变化的结果，需要进行不断变化才能执行这种动画。

摘要


结果，我们可以得出结论，使用CSS动画，值得确切注意执行它们涉及哪些系统资源。如果可能的话，值得使用GPU执行的操作。

您在项目中使用哪种动画？

More articles:


All Articles