querySelectorAllとgetElementsByClassName、速度比較

XPathとSelectorsAPIとgetElementsBy〜の使い分け - 素人がプログラミングを勉強するブログを書いた時に、複数クラス名で取得する場合はquerySelectorsAllのほうが早いと書いたが、本当かどうかきちんと調べてなかったので、やってみた。

Googleの検索結果のぺージで実行する。

function uniq(elems) {
  var ret = [],
  key = "_uniq" + Date.now();
  Array.forEach(elems, function(elem) {
    if (elem.getUserData(key)) return;
    elem.setUserData(key, true, null);
    ret.push(elem);
  });
  return ret;
}
console.time("getElementsByClassName");
for(var i=0;i<1000;i++)
uniq(Array.slice(document.getElementsByClassName("l")).concat(Array.slice(document.getElementsByClassName("g")))).sort(function(a,b)a.compareDocumentPosition(b) == 0x02);
console.timeEnd("getElementsByClassName");
console.time("querySelectorAll");
for(var i=0;i<1000;i++)
Array.slice(document.querySelectorAll(".l,.g"));
console.timeEnd("querySelectorAll");

getElementsByClassName: 448ms
querySelectorAll: 178ms

querySelectorAllのほうが早い。getElementsByClassName自体は早いのだけど、重複を弾く部分や、配列に直してconcatしたり、順番を後から直したりしなければいけないからロスが多い。