Id vs Class Whitelisting

JavaScript performance comparison

Test case created by olegbl

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<div class="ignore extra1 extra2" id="ignore1"></div>
<script>
  Benchmark.prototype.setup = function() {
    var e = document.getElementById("ignore1");
    var w10 = [];
    for (var I = 10; I >= 1; I --) w10.push("ignore" + I);
  };
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
ClassName IndexOf
 
var result = e.className.indexOf("ignore") !== -1;
 pending…
ClassList Scan
 
var result = false;
for (var I = 0; I < e.classList.length; I ++)
if (e.classList[I] === "ignore") {
result = true;
break;
}
 pending…
Id WhiteList (1)
 
var result = false;
for (var I = 1; I >= 1; I --)
if (e.id === ("ignore" + I)) {
result = true;
break;
}
 pending…
Id WhiteList (5)
 
var result = false;
for (var I = 5; I >= 1; I --)
if (e.id === ("ignore" + I)) {
result = true;
break;
}
 pending…
Id WhiteList (10)
 
var result = false;
for (var I = 10; I >= 1; I --)
if (e.id === ("ignore" + I)) {
result = true;
break;
}
 pending…
Id WhiteList (50)
 
var result = false;
for (var I = 50; I >= 1; I --)
if (e.id === ("ignore" + I)) {
result = true;
break;
}
 pending…
ClassList Contains
 
var result = e.classList.contains("ignore");
 pending…

You can edit these tests or add even more tests to this page by appending /edit to the URL.

Compare results of other browsers

0 comments

Add a comment