Testing if it's faster to store something in a map or in an element with a symbol

Benchmark created on

Preparation HTML

<svg width="1000" height="1000" xmlns="http://www.w3.org/2000/svg" id="canvas">


</svg>

Setup

const canvas = document.getElementById("canvas")
for(let i = 0; i < 1000; i++) {
	const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
	canvas.append(rect);
	rect.setAttribute("id", "id-" + i);
}
const theMap = new Map();
const theSymbol = Symbol("the symbol");
for(let child of canvas.children) {
	theMap.set(child, Math.random());
	child[theSymbol] = Math.random();
	child.setAttribute("data-num", Math.random());
}

Teardown

while(canvas.children.length > 0) {
	canvas.children[0].remove();
}

Test runner

Ready to run.

Testing in
TestOps/sec
Map test
let best = 0;
for(let child of canvas.children) {
	const val = theMap.get(child);
	if(val > best) best = val;
}
console.log(best);
ready
Symbol test
let best = 0;
for(let child of canvas.children) {
	const val = child[theSymbol];
	if(val > best) best = val;
}
console.log(best);
ready
AttributeTest
let best = 0;
for(let child of canvas.children) {
	const val = child.getAttribute("data-num");
	if(val > best) best = val;
}
console.log(best);
ready

Revisions

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