Dom vs pure object vs array property read

Benchmark created on

Setup

const ITEMS = 1000;
const RW_COUNT = 1000;
const RW_COUNT_MINUS_1 = RW_COUNT - 1;

const smallDomObj = document.createElement('span');
smallDomObj.testValue = 0;

const bigDomObj = document.createElement('span');
bigDomObj.testValue = 0;

const items = [];
for (let i = 0; i<ITEMS; i++) {
	items.push(`<span>${i}</span>`);
}
bigDomObj.innerHTML = items.join('');
	bigDomObj.testValue = 0;


const smallPureObj = {};
smallPureObj.testValue = 0;

const bigPureObj = {};
for (let i = 0, items = []; i<ITEMS; i++) {
	bigPureObj[`any_random_string_${i}`] = i;
}
bigPureObj.testValue = 0;

const smallArrayProp = [];
smallArrayProp.testValue = 0;

const bigArrayProp = new Array(ITEMS).fill(0);
bigArrayProp.testValue = 0;

const smallArrayIndex = [0];
const bigArrayIndexSameFirst = new Array(ITEMS).fill(0);
const bigArrayIndexSameLast = new Array(ITEMS).fill(0);
const bigArrayIndexInc = new Array(ITEMS).fill(0);

Test runner

Ready to run.

Testing in
TestOps/sec
Inc small dom obj prop
for (let i = 0; i < RW_COUNT; i++) smallDomObj.testValue++;
ready
Inc big dom obj prop
for (let i = 0; i < RW_COUNT; i++) bigDomObj.testValue++;
ready
Inc small pure obj prop
for (let i = 0; i < RW_COUNT; i++) smallPureObj.testValue++;
ready
Inc big pure obj prop
for (let i = 0; i < RW_COUNT; i++) bigPureObj.testValue++;
ready
Inc small array prop
for (let i = 0; i < RW_COUNT; i++) smallArrayProp.testValue++;
ready
Inc big array prop
for (let i = 0; i < RW_COUNT; i++) bigArrayProp.testValue++;
ready
Inc small array index
for (let i = 0; i < RW_COUNT; i++) smallArrayIndex[0]++
ready
Inc big array index (same first)
for (let i = 0; i < RW_COUNT; i++) bigArrayIndexSameFirst[0]++
ready
Inc big array index (same last)
for (let i = 0; i < RW_COUNT; i++) bigArrayIndexSameLast[RW_COUNT_MINUS_1]++
ready
Inc big array index (inc)
for (let i = 0; i < RW_COUNT; i++) bigArrayIndexInc[i]++
ready

Revisions

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