Benchmark: Iterate / Loop over + Filter data-* attributes

HTML Preparation code:

<div id="div" data-foo="foo" data-bar="bar" data-baz="baz" data-test-a="a" data-test-b="b" data-test-c="c">

Script Preparation code:

let div = document.getElementById('div');

Tests:

Object.keys() + .dataset
Object.keys(div.dataset).filter(v => v.startsWith('test')).map(v => v.substring(4).toLowerCase());
Array.from() + .attributes
Array.from(div.attributes).map(a => a.nodeName).filter(v => v.startsWith('data-test-')).map(v => v.substring(10));
for + .attributes
let l = []; for(var i=0; i < div.attributes.length; i++) { let n = div.attributes[i].nodeName; if(n.startsWith('data-test-')) l.push(n.substring(10)); }

Rendered benchmark preparation results:

Previous results

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 130 on Mac OS X 10.15.7

for + .attributes

1.0M/s

Object.keys() + .dataset

956K/s

Array.from() + .attributes

795K/s

View exact numbers

Iterate / Loop over + Filter data-* attributes (version: 1)