Run results for: DOM selector benchmark about class, data attribute

Run details:

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 14_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 KAKAOTALK 9.2.3

Browser: Mobile Safari 14

Operating system: iOS 14.5

Device Platform: Mobile

Date tested: 3 years ago

Test name	Executions per second
class	57881.6 Ops/sec
data attribute	81536.4 Ops/sec

HTML Preparation code:

<div class="bar" data-value="true"></div>
<div class="bar" data-value="true"></div>
<div class="bar" data-value="true"></div>
<div class="bar" data-value="true"></div>
<div class="bar" data-value="false"></div>
<div class="bar" data-value="true"></div>
<div class="bar" data-value="false"></div>
<div class="bar" data-value="false"></div>
<div class="bar" data-value="true"></div>
<div class="bar" data-value="true"></div>

Tests:

class
const $selector = document.querySelectorAll('.bar'); $selector.forEach(element => { if (JSON.parse(element.dataset.value)) { console.log(element.dataset.value); } });
data attribute
const $selector = document.querySelectorAll('[data-value="true"]'); $selector.forEach(element => { console.log(element.dataset.value); });