querySelectorAll vs getElementsByClassName

Question

querySelectorAllで取得したノードリストをループし、それぞれに新しいクラスを追加すると、getElementsByClassName（100ms）で取得した時間よりもはるかに短い時間（3ms）がかかります。

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（ライブノードのa.k.aリスト）です。 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'); 
    } 

}); 

今すぐクロームのパフォーマンス（またはタイムライン）ツールを実行します。 は、ここでは簡単に実行できるテストです。ここでdiffを見ることができます：