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

Question

我仅使用 DOM 在浏览器中构建了 Conway 的生命游戏。没什么特别的，以前做过。我的目标是尽可能优化它。我的实际 Game of Life 代码运行良好，而且速度足够快，符合我的喜好。瓶颈出现在更新屏幕状态。屏幕上有数十万或数百万个 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];
        }
    }
}

类(class)风格为:

.b1 {
    background: #000;
}

http://jsfiddle.net/WE5jQ/

Answer 1

不要更新每一个的样式。尽可能使用最通用的选择器，并在样式表中操纵实际的样式规则。让浏览器完成剩下的工作。