Benchmark: Multiple getAttribute vs dataset

HTML Preparation code:

<div id="foo" data-foo="foo_id" data-foo2="foo_id2" data-foo3="foo_id3" data-foo4="foo_id4" data-foo5="foo_id4"></div>

Tests:

getAttribute
var element = document.getElementById("foo"); var i = 10000; while (i--) { var foo = element.getAttribute("data-foo"); var foo2 = element.getAttribute("data-foo2"); var foo3 = element.getAttribute("data-foo3"); var foo4 = element.getAttribute("data-foo4"); var foo5 = element.getAttribute("data-foo5"); }
dataset
var element = document.getElementById("foo"); var i = 10000; while (i--) { var foo = element.dataset.foo; var foo2 = element.dataset.foo2; var foo3 = element.dataset.foo3; var foo4 = element.dataset.foo4; var foo5 = element.dataset.foo5; }
dataset destructurization
var element = document.getElementById("foo"); var i = 10000; while (i--) { var { foo, foo2, foo3, foo4, foo5 } = element.dataset; }

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; rv:136.0) Gecko/20100101 Firefox/136.0

Browser/OS: Firefox 136 on Mac OS X 10.15

getAttribute

154K/s

dataset destructurization

436/s

dataset

319/s

View exact numbers

Multiple getAttribute vs dataset (version: 4)