如何快速更新Javascript中许多元素的类？

Question

我在一个页面上有几千个元素，它们的 CSS 类应该在按下按钮时更改。 目前我的js代码如下：

for each (var id in list) {
    var element = document.querySelector('[data-id="' + id + ']');
    element.className = 'myClass';
}

在 IE 中，这需要将近 20 秒。我做了一些分析，似乎 .className 操作需要半毫秒；这与垃圾收集一起使得它需要这么长时间。我不确定 .className 是否会导致回流。

无论如何，我怎样才能比现在更快地完成这项任务？

Answer 1

我会让 CSS 完成所有艰苦的工作..

只要有某种父类，向它添加一个类并让你的 CSS 以它为目标。

例如。

document.querySelector("button").onclick = function () {
  document.body.classList.toggle("button-clicked");
}

[data-id] {
  background-color: yellow;
}

.button-clicked [data-id] {
  background-color: pink;
}

<div data-id="1">One</div>
<div data-id="2">Two</div>
<div data-id="3">Three</div>
<div data-id="4">Four</div>
<div data-id="5">Five</div>

<button>Click Me</button>

如果只做这个 CSS 不是一个选项，更新 DOM 的最佳方法是分离它。这是一个创建 10,000 个 div 的示例，在按钮上单击它会随机切换每个选定的类，但在此之前会暂时将它们与 DOM 分离，然后在翻转类后重新附加。

var container = document.querySelector(".container");

function addLine (txt) {
  var div = document.createElement("div");
  div.innerText = txt;
  div.classList.add("line");
  container.appendChild(div);
}

for (var l = 1; l <= 10000; l += 1) {
  addLine("This is Line " + l + ", and some extra text");
}

document.querySelector("button").onclick = function () {
  //temporally remove from DOM 
  container.parentNode.removeChild(container);  
  //all DOM methods here on conatiner should now be fast
  //as there is no UI updates required..
  var lines = container.querySelectorAll(".line");
  for (var l = 0; l < lines.length; l ++) {
    var e = lines[l];
    if (Math.random() > 0.5)
      e.classList.toggle("selected");
  };
  //Ok done, lets now put it back into the DOM
  document.body.appendChild(container); 
}

.line {
  background-color: yellow;
}

.line.selected {
  background-color: red;
}

<button>toggle class</button>

<div class="container">
</div>