CSS动画表现

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

See demo http://www.audenaerde.org/matrix.html这里。或这个JSFiddle https://jsfiddle.net/5o9uakkc/

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

我已经将它实现为渲染很多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 分析，它显示了警告：

长帧时间表明卡顿和渲染效果不佳 表现。

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

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

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

我得到的最终结果是here https://jsfiddle.net/5o9uakkc/6/。不像你的那么精确，但可以获得 50+ fps。 对于每一个修改我都添加了评论，请查看。

Cache

你能做的最简单的事情就是cache $(window).height()。通常是一个稳定的数字，不需要重新查询。和resize可以添加处理程序以适应视口变化。缓存窗口大小将我的 fps 从 9~10 更改为 12~15。虽然不大，但却是一个唾手可得的果实。

昂贵的款式

接下来你需要做的是remove text-shadow，这是一个非常昂贵的风格，给定您案例中的节点号。 （为什么？它需要 CPU 绘制阴影，而 GPU 无法提供帮助。阅读更多here https://dl.dropboxusercontent.com/u/39519/talks/cssperf/index.html, and html5rocks http://www.html5rocks.com/en/tutorials/#performance）。 如果您对 Chromium 实施感兴趣，text-shadow完成于文本绘制器.cpp, 画者GraphicContext，这主要是由CPU完成的。动画文本阴影是一场性能噩梦。将此提升 fps 更改为 20+。

DOM访问

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

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

在画布上查看

尽管如此，对于基于 DOM 的实现来说，你的动画是相当艰巨的工作。每列都会更新，并且文本大小经常变化。如果你真的想要原始的矩阵效果，可以尝试canvas out.