CSS动画表现

Question

我有一个小的爱好元素，我在其中尝试构建矩阵雨: .

参见 demo这里。或者这个JSFiddle

我的问题是:我怎样才能使它更有效率，因为我发现当我添加很多列时它会变慢。

我将其实现为呈现大量 absolute 定位的动画 div。

这是我的 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 设置了一些自定义样式，其中我改变了一些设置，如字体大小、动画速度等。

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();
}

我曾尝试使用 chrome 分析，它显示了我的警告:

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

提供的链接提供了一些见解；但是，据我所知，我没有进行太多布局。

长话短说 它很慢。什么是好的性能优化？

Answer 1

经过几次尝试，如果需要精确的动画，我认为最好的解决方案是寻找 Canvas 。

我得到的最终结果是here .不如你的精确，但可以达到 50+ fps。 对于我添加评论的每一个修改，请查看。

缓存

您可以做的最简单的事情是缓存 $(window).height()。通常是一个稳定的号码，不需要重新查询。并且可以添加 resize 处理程序以适应视口(viewport)更改。缓存窗口大小将我的 fps 从 9~10 更改为 12~15。不大，但容易获得。

昂贵风格

接下来您需要做的是删除 text-shadow，这是一个非常昂贵的样式，给定您的节点号案件。 (为什么？它需要 CPU 绘制阴影，而 GPU 在这里无能为力。阅读更多 here 和 html5rocks)。 如果您对 Chromium 实现感兴趣，text-shadow 是在 TextPainter.cpp 中完成的，由 GraphicContext 绘制，主要由 CPU 完成。动画文本阴影是一场性能噩梦。将此提升 fps 更改为 20+。

DOM 访问

最后一件事是 DOM 访问，每个帧更新都需要一个 dom 插入，相应地，由另一个计时器删除 dom。这很痛苦。我尝试减少 DOM 移除，因此我为每一列添加了一个容器。而且添加容器确实增加了 DOM 的复杂性，我必须等待动画结束才能更新容器。毕竟，它省去了很多 dom 操作、定时器和闭包。此外，我将 setTimeout 更新为 requestAnimationFrame，以便浏览器可以更好地协调 DOM 访问。

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

在 Canvas 上看

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