jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.

jsperf.com URLs are mirrored at the same path, e.g:

https://jsperf.com/negative-modulo/2

Can be accessed at:

https://jsperf.app/negative-modulo/2

Testing out different ways of isolating divs with data-* attributes

Benchmark created on July 3, 2024

Preparation HTML

<div data-=""></div>
<div data-=""></div>
<div data-=""></div>
<div data-=""></div>
<div data-=""></div>
<div data-=""></div>
<div data-=""></div>
<div data-=""></div>
<div data-=""></div>
<div data-=""></div>
<div data-100=""></div>
<div data-100=""></div>
<div data-100=""></div>
<div data-100=""></div>
<div data-100=""></div>
<div data-100=""></div>
<div data-100=""></div>
<div data-100=""></div>
<div data-100=""></div>
<div data-100=""></div>
<div data-100=""></div>
<div data-100=""></div>
<div data-100=""></div>
<div data-100=""></div>
<div data-100=""></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div data-name=""></div>
<div data-name=""></div>
<div data-name=""></div>
<div data-name=""></div>
<div data-name=""></div>
<div data-name=""></div>
<div data-name=""></div>
<div data-name=""></div>
<div data-name=""></div>
<div data-name=""></div>
<div data-name=""></div>
<div data-name=""></div>
<div data-name=""></div>
<div data-name=""></div>
<div data-name=""></div>
<div data-name=""></div>
<div data-name=""></div>
<div data-name=""></div>
<div data-name=""></div>
<div data-name=""></div>
<div data-name=""></div>
<div data-name=""></div>
<div data-name=""></div>
<div data-name=""></div>
<div data-name=""></div>
<div data-name=""></div>
<div data-name=""></div>
<div data-name=""></div>
<div data-name=""></div>
<div data-name=""></div>
<div data-attr-with-long-da01taset-name="a value that is even longer"></div>
<div data-attr-with-long-da02taset-name="a value that is even longer"></div>
<div data-attr-with-long-da03taset-name="a value that is even longer"></div>
<div data-attr-with-long-da04taset-name="a value that is even longer"></div>
<div data-attr-with-long-da05taset-name="a value that is even longer"></div>
<div data-attr-with-long-da06taset-name="a value that is even longer"></div>
<div data-attr-with-long-da07taset-name="a value that is even longer"></div>
<div data-attr-with-long-da08taset-name="a value that is even longer"></div>
<div data-attr-with-long-da09taset-name="a value that is even longer"></div>
<div data-attr-with-long-da10taset-name="a value that is even longer"></div>
<div data-attr-with-long-da11taset-name="a value that is even longer"></div>
<div data-attr-with-long-da12taset-name="a value that is even longer"></div>
<div data-attr-with-long-da13taset-name="a value that is even longer"></div>
<div data-attr-with-long-da14taset-name="a value that is even longer"></div>
<div data-attr-with-long-da15taset-name="a value that is even longer"></div>

Test runner

Ready to run.

Test Ops/sec

filter + object.keys

Testing in
Test	Ops/sec
filter + object.keys	`[...document.querySelectorAll('*')].filter(el => Object.keys(el.dataset).length > 0);`	ready
for in	`[...document.querySelectorAll('*')].filter(el => { for (let prop in el.dataset) return true; return false; })`	ready
JSON.stringify	`[...document.querySelectorAll('*')].filter(el => JSON.stringify(el.dataset) !== '{}')`	ready

[...document.querySelectorAll('*')].filter(el => Object.keys(el.dataset).length > 0);

ready

for in

[...document.querySelectorAll('*')].filter(el => {
	for (let prop in el.dataset) return true;
	return false;
})

ready

JSON.stringify

[...document.querySelectorAll('*')].filter(el => JSON.stringify(el.dataset) !== '{}')

ready

Revisions

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

Revision 1: published on July 3, 2024