javascript - 如何快速更新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 的示例，单击按钮会随机切换每个 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>