JavaScript 优化 : matrix fall

Question

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

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

我重试了三种不同的方式，但每次我都无法通过 Firefox 获得良好的性能结果(我使用的是版本 17)。

• 第一次尝试是每次为每个单元格创建和删除 div。
• 第二次尝试是在开始时预分配所有的 div 单元格，只更改字符和颜色
• 第三次尝试(当前一次)是创建一个列 div，只在底部添加新的 div 单元格，并在字符下降结束时删除整个列。

在 Chrome、Safari 和 IE 上，结果总是很好，但在 FF 上却很慢。

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

Answer 1

第一个和普遍的优化将使用 requestAnimFrame .它应该与每个动画一起使用。

我在您的代码中看到的是大量的 dom 操作。特别是你调用 createElement 数千次调用 drawFall。这很慢。尝试在绘制之前准备坠落，然后为其设置动画以更改颜色，然后移除坠落。 (因此尽量减少 createElement 调用的次数)此外，您还可以使用 documentFragment这也有帮助。

其他想法是implement it然而，使用 WebGL 是完全不同的故事。