JavaScript优化:矩阵秋季

我实现了这个有趣的页面：

http://www.xthema.it/misc/christmas-matrix.html

我要以三种不同的方式进行重试，但是每次我无法通过Firefox获得良好的性能结果（我正在使用版本17）。

第一次尝试是每次为每个单元格创建和删除Div。
第二次尝试是在开始时对所有DIV单元格进行预先分配，并仅更改字符和颜色
第三次尝试（当前的尝试）是创建一个列div，在底部仅添加新的Div单元格，然后在字符落下的末端删除整列。

在Chrome，Safari和IE上，结果总是不错的，但是在FF上它很慢。

有什么建议吗？有人知道访问DOM或CSS的FF弱点吗？没有人有任何优化？

首先使用requestAnimframe。它应与每个动画一起使用。

我在您的代码中看到的是很多DOM操纵。尤其是您调用数千次创建元素。这很慢。尝试在绘制秋天之前准备准备秋季，然后将其动画化，然后将其更改颜色，然后删除掉落。（因此，尝试最大程度地减少创建元件数量的数量）您还可以使用文档fragment，这也可以帮助您。

其他想法是使用WebGL实施它，但是，这是完全不同的故事。

我发现了另一个可能的（超级）快速解决方案：

描述：服用半透明的PNG并将其放在矩阵字母上，以便其中一些是半可见的。移动PNG。很难描述 - 易于遵循随附的JSFiddle上的Quick'n'dirty实现。

快速而污垢实现：（请参阅http：//jsfiddle.net/zbhne/）

<html>
<head>
<style type="text/css">
#box{
  height: 100px;
  width: 300px;
  overflow: hidden;
  border:2px solid;
  background: #000;
}
</style>
<script type="text/javascript">
onload = function(){
  var el = document.getElementById("test");
  el.style.position = "relative";
  var x = -700;
  function fly(){
    x += 10;
    el.style.left = x + "px";
    if(x > -100){
      x = -700;
    }
  }
  setInterval(fly, 50);
}
</script>
</head>
<body>
<div id="box">
<div style="position: relative; width: 1000px; color: green">test of letterstest of letterstest of letterstest of letterstest of letters</div>
<div id="test"><div style="width: 1000px; height: 100px; background: url(layer.png); position: relative; top: -50px">invisible</div></div>
</div>
</body>
</html>

您应该创建适当的图层。PNG半透明映像以使其工作。

我尝试使用requestAnimframe，但没有显着改进。

使用Firebug Profiler似乎慢速操作正在改变颜色

cellel.style.color = br;

因此，在这一刻，我发现的唯一解决方案是最小化调色板

// BRIGHTNESS0 is the MAX brightness value
// BRIGHTNESSSTEPS is the palette size
// i : 31 = n : BRIGHTNESS0
var i = Math.floor(n * 31 / BRIGHTNESS0);
// brightness inc = BRIGHTNESS0 / BRIGHTNESSSTEPS
var inc = 31 / BRIGHTNESSSTEPS;
i = Math.floor(Math.floor(i / inc) * inc);
var brHex = '#';
if (i < 16) {
  var d = i * 16 + i;
  brHex += '0' + Number(i).toString(16) + '0';
} else {
  i -= 16
  var o = Number(i).toString(16);
  brHex += o + 'f' + o;
}
...

在ff上，我不使用32级，而是更少，如果不改变颜色，我会跳过style.color分配。

var br = BRIGHTNESSTABLERGB[cell[1]];
if (cellEl.style.color != br)
  changeBrightness(cellEl,br);

以这种方式好一点。还有其他建议吗？

相关内容

最新更新

热门标签：