Run results for: JS dataset Vs. classList read vs write

Run details:

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

Browser: Firefox 141

Operating system: Linux

Device Platform: Desktop

Date tested: one year ago

dataset read

1.1M/s

classList read

969K/s

classList write one class

8K/s

dataset write one attribute

5K/s

dataset write multiple attributes

2K/s

classList write multiple classes

60/s

View exact numbers

Test name	Executions per second
✓ dataset read	1,076,439 Ops/sec
classList read	969,137 Ops/sec
classList write one class	7,513 Ops/sec
dataset write one attribute	4,634 Ops/sec
dataset write multiple attributes	2,148 Ops/sec
classList write multiple classes	60 Ops/sec

Script Preparation code:

var elem1 = document.createElement("div");
var elem2 = document.createElement("div");
var elem3 = document.createElement("div");
var elem4 = document.createElement("div");

Tests:

dataset write multiple attributes
let i = 1000; while (i--){ elem1.dataset["test" + i] = true; }
classList write multiple classes
let i = 1000; while (i--){ elem2.classList.add("test" + i); }
dataset write one attribute
let i = 1000; while (i--){ elem3.dataset["test"] = i; }
classList write one class
let i = 1000; while (i--){ elem4.classList.toggle("test"); }
dataset read
let i = 1000; while (i--){ if(elem2.dataset["test"] === i){} }
classList read
let i = 1000; while (i--){ if(elem4.classList.contains("test")){} }