CSS动画性能 [英] CSS animation performance

问题描述

我有一个小型爱好项目，尝试在其中建立矩阵阵雨：。

I have a small hobby project in which I try to build a matrix rain: .

请参见演示。或 JSFiddle

我的问题是：我可以提高效率吗，因为我看到添加很多列时它会变慢。

My question is: how can I make this more efficient, as I can see it gets slow when I add a lot of columns.

我已经实现了它，它渲染了很多绝对已定位动画的 div 。

I have implemented it as rendering a lot of absolute positioned divs that are animated.

这是我的CSS：

div
{
    position:absolute;
    width:1em;
    display:inline-block;
    color: black;
    animation-name: example;
    animation-duration: 2s;
    text-shadow: none; 
}

@keyframes example 
{
    0%   {color: white;  text-shadow: -1px 1px 8px white;}
    15%  {color: #5f5 ;  text-shadow: -1px 1px 8px #5f5 ;}
    100% {color: black;  text-shadow: none;}
}

在javascript中，我为每个设置了自定义样式 div ，在这里我可以更改一些设置，例如字体大小，动画速度等。

In javascript I set some custom styling for each div, where I vary some settings, like font-size, animation speed etc.

JS的主要部分：

var textStrip = ['诶', '比', '西', '迪', '伊', '吉', '艾', '杰', '开', '哦', '屁', '提', '维'];

var matrixcol = function()
{
    var top =  Math.floor(Math.random() * $(window).height() * 0.5);
    var size = 10 + Math.floor(Math.random()*10);
    var col =  Math.floor(Math.random() * $(window).width() - size);
    var ms  =  500 + Math.floor(Math.random()*1500);

            var timer;
    var aap = function()
    {
        var randomNumber = Math.floor(Math.random()*textStrip.length);

        var newelem = $("<div style='font-size:"+ size+ "px;top:"+top+"px; left:"+col+"px;animation-duration:"+ 2*ms + "ms'>" + textStrip[randomNumber] +  "</div>" );
        $('body').append(newelem);
        top+=size;
        setTimeout( function() {newelem.remove();}, (1.6*ms)-(ms/40)); 
        if (top>$(window).height()-size)
        {
            size = 10 + Math.floor(Math.random()*10);
            top=0; Math.floor(Math.random() * $(window).height() * 0.5);
            col =  Math.floor(Math.random() * $(window).width() -size);
            ms = 500 + Math.floor(Math.random()*1500);
                            clearInterval(timer);
            timer = setInterval(aap, ms/40);
        }
    }
    timer = setInterval(aap, ms/40);

}


$( document ).ready(function() {
   var i;   
   for (i = 0; i < 25; i++) {
       matrixcol();
}

I尝试使用chrome配置文件，这向我显示了警告：

I have tried to use the chrome profiling, that shows my a warning:

较长的帧时间表明出现了颠簸和较差的渲染
性能。

Long frame times are an indication of jank and poor rendering performance.

所提供的链接提供了一些见识；但是，到目前为止，我可以看到我没有太多布局

The link that is provided gives some insight; however, as far a I can see I don't have much layouting going on.

tl; dr
很慢，什么是好的性能优化？

tl;dr It is slow. What would be a good performance optimizations?

推荐答案

经过几次尝试，我认为如果需要精确的动画，您最好的解决方法是使用画布。

After several try, I think your best solution is looking to canvas, if the exact animation is desired.

我得到的最终结果是此处。虽然不如您精确，但得到50 + fps。
对于我添加的注释的每个修改，请检查或t。

The ending result I get is here. Not as exact as yours but get a 50+ fps. For every modification I have added comment, please check it out.

最简单的操作是缓存 $（window）.height（）。它通常是一个稳定的数字，无需重新查询。可以添加 resize 处理程序以适应视口更改。缓存窗口大小将我的fps从9〜10更改为12〜15。

The easiest thing you can do is cache $(window).height(). It is usually a stable number, no need to re-query it. And resize handler can be added to adapt viewport change. Cache window size changes my fps from 9~10 to 12~15. Not big, but a low-hanging fruit.

接下来的一件事是删除 文本阴影，这是一种非常昂贵的样式，给定您的节点编号。 （为什么？这需要CPU绘制阴影，GPU无法在这里提供帮助。请在此处此处了解更多信息和 html5rocks ）。
如果您对Chromium实现感兴趣，可以在 TextPainter.cpp 中完成文本阴影，由绘制GraphicContext ，主要由CPU完成。为文本阴影设置动画是一场表演梦night。将此提升fps更改为20 +。

The next thing you need to do is remove text-shadow, it is a very expensive style, given the node number in your case. (Why? It requires CPU paints shadow and GPU cannot help here. read more here, and html5rocks). If you are interested in Chromium implementation, text-shadow is done in TextPainter.cpp, painted by GraphicContext, which is done primarily by CPU. And animating text-shadow is a performance nightmare. Change this boost fps to 20+.

最后一件事是DOM访问，每帧更新需要插入dom，并相应地由另一个计时器删除dom。真痛苦我尝试减少DOM删除，所以我为每个列添加了一个容器。并且添加容器确实增加了DOM的复杂性，我必须等待动画结束来更新容器。毕竟，它节省了许多dom操作，计时器和关闭操作。此外，我将 setTimeout 更新为 requestAnimationFrame ，以便浏览器可以更好地管弦乐队DOM访问。

The last thing is DOM access, every frame update requires a dom insertion and, correspondingly, a dom removal by yet another timer. This is painful. I try to reduce DOM removal, so I added a container for each column. And adding container does add DOM complexity, I have to wait for the animation end to update the container. After all, it saves many dom manipulations, timers and closures. Furthermore I updated setTimeout to requestAnimationFrame so that browser can orchestra DOM access better.

结合以上三个，我得到了50+ fps，不如60fps流畅。也许我可以通过减少DOM插入来进一步优化它，其中一列中的所有字符都插入一次，对于每个字符， animation-delay 是

Combining the above three, I got a 50+ fps, not as smooth as 60fps. Maybe I can further optimize it by reducing DOM insertion, where all characters in a column is inserted once, and for each character the animation-delay is at interval.

不过，对于基于DOM的实现，您的动画工作相当艰巨。每列都会更新，并且文本大小会经常变化。如果您真的想要原始的矩阵效果，请尝试 canvas 。

Still, your animation is quite harsh job for DOM based implementation. Every column is updated, and text size varies frequently. If you really want the original matrix effect, try canvas out.

这篇关于CSS动画性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！