动态更新数百万个 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

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

Answer 2

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

Answer 3

如果你想优化你的循环性能，你可以使用Duff's Device，因为你有大量的迭代。这是一种展开循环体的技术，这样每次迭代实际上都完成了多次迭代的工作。 Jeff Greenberg 被认为是第一个将 Duff 的设备发布到 JavaScript 的端口。算法如下：

//credit: Jeff Greenberg
var i = items.length % 8;

while(i){
    process(items[i--]);
}

i = Math.floor(items.length / 8);

while(i){
    process(items[i--]);
    process(items[i--]);
    process(items[i--]);
    process(items[i--]);
    process(items[i--]);
    process(items[i--]);
    process(items[i--]);
    process(items[i--]);
}

在 500,000 次迭代时，执行时间比常规循环少 70%。

Answer 4

由于这个问题被标记为 jQuery，您可以使用它来添加/删除您想要的类。首先，获取您在元素中使用的通用 id/类，然后切换您想要的类：

$('.generic-class').toggleClass('.another-class');

这样，您将向所有具有.generic-class 的现有元素添加.another-class。

在你的 CSS 中：

.another-class { //other styles that you want to apply. }