如何快速更新Javascript中许多元素的类? [英] How to quickly update the classes of many elements in Javascript?

问题描述

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

I have a couple thousand elements on a page that should have their CSS class changed upon the pressing of a button. Currently I have js code like the following:

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

在IE中，这需要将近20秒.我进行了一些分析，似乎.className操作只需要半毫秒的时间；与垃圾收集一起需要花费这么长时间.我不确定.className是否引起重排.

In IE, this takes almost 20 seconds. I did some profiling, and it simply seems that the .className operation takes like half a millisecond; that along with garbage collection is what makes it take so long. I'm not sure if .className is causing a reflow or not.

无论哪种方式，我如何能比现在更快地完成这项任务?

Either way, how can I accomplish this task faster than I currently am?

推荐答案

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

I would make the CSS do all the hard work..

只需具有某种父项，就可以为其添加一个类并使您的CSS成为目标.

Just have some sort of parent, add a class to this and make your CSS target it.

例如

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分离，然后在翻转这些类后重新附加.

If doing this CSS only is not an option, the best way to update the DOM is to do it detached,. Here is an example that creates 10,000 div's, and on the button click it randomly toggles the selected class of each one, but before doing this will temporarily detach them from the DOM, and then reattach after flipping the classes.

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>

这篇关于如何快速更新Javascript中许多元素的类?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！