querySelectorAll vs getElementsByClassName

Question

当我循环通过querySelectorAll获得的节点列表并为每个节点添加一个新类时，所需的时间(3ms)比使用getElementsByClassName(100ms).Why获得的要少得多？

var container = document.getElementById('box-container');
var button = document.getElementById('button');

for (var i = 0; i < 3000; i++) {
  var div = document.createElement('div');
  div.classList.add('box');
  div.index = i;
  container.appendChild(div);
}

button.addEventListener('click', function() {

  var box1 = container.getElementsByClassName('box');
  for (var i = 1;i < box1.length; i+=2){
      box1[i].classList.toggle('gray');
  };

  var box2 = container.querySelectorAll('.box');
  for (var i = 1;i < box2.length; i+=2){
      box2[i-1].classList.toggle('gray');
  };

});

Answer 1

不同之处在于运行的列表类型不同。

box1是当DOM改变时更新的NodeList (也称为活动节点列表)。box2是一个数组，它是一个non-live列表-所以更改DOM不会影响它。当您在box1上迭代时发生的情况是，在每个类切换时，box1列表都会更新，这会导致开销。下面是一个您可以轻松运行的测试：

var container = document.getElementById('box-container');
var button = document.getElementById('button');

for (var i = 0; i < 6000; i++) { // added 3000 more to challenge modern browsers...
    var div = document.createElement('div');
    div.classList.add('box');
    div.index = i;
    container.appendChild(div);
}

button.addEventListener('click', function () {

    var box1 = container.getElementsByClassName('box');
    for (var i = 1; i < box1.length; i += 2) {
        box1[i].classList.toggle('gray');
    }

    var deadBox1 = [];
    for (i = 0; i < box1.length; i++) {
        deadBox1[i] = box1[i];
    }

    for (var i = 1; i < deadBox1.length; i += 2) {
        deadBox1[i].classList.toggle('gray');
    }

    var box2 = container.querySelectorAll('.box');
    for (i = 1; i < box2.length; i += 2) {
        box2[i - 1].classList.toggle('gray');
    }

});

现在运行chrome性能(或时间线)工具。你可以在这里看到区别：

​