CSS动画表演
我有一个小小的爱好项目，在这个项目中，我试图建立一个矩阵雨：
。
这里见演示。或者这个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设置了一些自定义样式，其中我改变了一些设置，比如字体大小、动画速度等等。
联合来文的主要部分：
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();
}我尝试使用铬分析，这显示了我的警告：
长帧时间是jank和糟糕的渲染性能的一个标志。
提供的链接提供了一些洞察力；但是，据我所知，我没有太多的布局。
；博士，它很慢。什么是好的性能优化？
回答 1
Stack Overflow用户
发布于 2015-10-07 17:29:19
经过几次尝试，我认为您最好的解决方案是寻找画布，如果确切的动画是需要的。
我得到的结局是这里。不像你的那么精确，但得到一个50+ fps。对于我增加的每一个修改意见，请检查它。
缓存
您可以做的最简单的事情是cache $(window).height()。它通常是一个稳定的数字，不需要再查询它.并且可以添加resize处理程序以适应视口更改。缓存窗口大小改变我的fps从9~10到12~15。不是大，但低挂水果。
昂贵风格
接下来您需要做的是remove text-shadow，它是一个非常昂贵的样式，考虑到您的例子中的节点号。(为什么？它需要CPU绘制阴影，GPU在这里无能为力。阅读更多这里和html5rocks)。如果您对铬的实现感兴趣，text-shadow是用TextPainter.cpp完成的，由GraphicContext绘制，主要由CPU完成。而生动的文本阴影则是一场表演噩梦。将此boost fps更改为20+。
DOM访问
最后一件事是DOM访问，每个帧更新都需要一个dom插入，相应地，还需要另一个计时器删除dom。这很痛苦。我尝试减少DOM删除，所以我为每个列添加了一个容器。而添加容器确实增加了DOM的复杂性，我不得不等待动画端更新容器。毕竟，它节省了许多dom操作、计时器和闭包。此外，我将setTimeout更新为requestAnimationFrame，以便浏览器能够更好地进行DOM访问。
结合以上三个因素，我得到了一个50+ fps，不像60 fps那么平滑。也许我可以通过来进一步优化它，减少DOM插入，其中列中的所有字符都插入一次，对于每个字符，animation-delay处于间隔。
望着画布
尽管如此，对于基于DOM的实现来说，您的动画工作还是相当苛刻的。每一列都被更新，文本大小经常变化。如果你真的想要原始矩阵效果，试试画布。
https://stackoverflow.com/questions/32996102
复制相似问题
腾讯云开发者
