Benchmark: id-vs-css-vs-data - MeasureThat.net

HTML Preparation code:

<div id="test1"></div>
<div class="test2"></div>
<div data-arg="test3"></div>

Tests:

id
var a = document.getElementById("test1");
class
var b = document.body.querySelector(".test2");
class-all
var c = document.body.querySelectorAll(".test2");
data
var d = document.body.querySelector("[data-args=test3]");
data-all
var e = document.body.querySelectorAll("[data-args=test4]");

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
id
class
class-all
data
data-all

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 7 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

Browser/OS: Chrome 56 on Mac OS X 10.12.2

View result in a separate tab

Test name	Executions per second
id	2594275.0 Ops/sec
class	673346.3 Ops/sec
class-all	154885.7 Ops/sec
data	69481.0 Ops/sec
data-all	73534.9 Ops/sec