动态更新数百万个DOM元素样式的最快方法

Question

我只是使用DOM在浏览器中构建了Conway的生命游戏.没有什么特别的,以前做过的.我的目标是尽可能地优化它.我的实际游戏生活代码工作正常,并且足够快,我喜欢.更新屏幕状态时出现瓶颈.屏幕上有数十万或数百万个DOM元素,您可以想象这可能会非常慢(虽然比我想象的要快).我的问题是:

一次在屏幕上使用超过一百万个DOM元素,迭代DOM元素列表并单独更改其样式的最快方法是什么？

我正在使用一个类来跟踪样式,动态更改它们style而不是更好class吗？我将所有这些元素保存在一个多维数组中,迭代通过另一种方式会更好(循环本身不是瓶颈,我的代码中有很多这样的循环运行得足够快)？我真的不知道"回流"或浏览器在元素变化时如何呈现内容.是否可以通过提高绩效的方式利用这些想法？

这是我目前的代码:

var updateUI = function () {
    for (var i = 0; i < width; i++) {
        var row = grid[i];
        var rowUI = gridUI[i];
        for (var j = 0; j < height; j++) {
            rowUI[j].className = "b" + row[j];
        }
    }
}

类风格是:

.b1 {
    background: #000;
}

http://jsfiddle.net/WE5jQ/

Answer 1

您可以将网格划分为更小的区域，然后仅更新被视为“脏”区域中的元素的样式（与上一次迭代相比，至少包含一个已更改的元素）。这应该会显着减少每次更新 UI 调用时需要执行的操作量，尤其是当我们谈论数百万个元素时。