Benchmark: getAttribute + setAttribute vs dataset vs Map (for loop 1K)

HTML Preparation code:

<div id="foo" data-foo="foo_id"></div>

Tests:

getAttribute
var element = document.getElementById("foo"); for (let i = 0; i < 1000; ++i) { var originalAttribute = element.getAttribute("data-foo"); element.setAttribute("data-foo", String(i)); var newAttribute = element.getAttribute("data-foo"); }
dataset
var element = document.getElementById("foo"); for (let i = 0; i < 1000; ++i) { var originalAttribute = element.dataset.foo; element.dataset.foo = String(i); var newAttribute = element.dataset.foo; }
new Map();
var dataset = new Map(); var element = document.getElementById("foo"); dataset.set(element, element.dataset.foo); for (let i = 0; i < 1000; ++i) { var originalAttribute = dataset.get(element); dataset.set(element, String(i)); var newAttribute = dataset.get(element); }

Rendered benchmark preparation results:

Previous results

Latest run results:

Run details: (Test run date: 17 days ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:149.0) Gecko/20100101 Firefox/149.0

Browser/OS: Firefox 149 on Linux

Related benchmarks:

getAttribute + setAttribute vs dataset vs Map (for loop 1K) (version: 1)