Benchmark: ClassList v2 - MeasureThat.net

Script Preparation code:

var obj = {};

for (i = 1000; i > 0; i--) {
  if (i%2 == 0) {
  	obj[i] = 'String';
  } else {
    obj[i] = [ 'Array of String', 'Array of String' ];
  }
}

Tests:

forEach & concatenate reduce
function ClassList(collection={}) { const classNames = {}; const keys = Object.keys(collection); keys.forEach((key) => { const innerCollection = collection[key]; const collectionCheck = Object.prototype.toString.call(innerCollection); switch (collectionCheck) { case '[object Object]': { const innerKeys = Object.keys(innerCollection); if (innerKeys.length === 0) { classNames[key] = ''; break; } let classList = []; innerKeys.forEach((innerKey) => { if (!innerCollection[innerKey] || !innerCollection[innerKey].length) { return; } const innerCollectionCheck = Object.prototype.toString.call(innerCollection[innerKey]); switch (innerCollectionCheck) { case '[object Array]': classList.push(...innerCollection[innerKey]); break; case '[object String]': classList.push(innerCollection[innerKey]); break; } }); classNames[key] = classList.reduce((acc, cl) => (acc += cl + ' '), ''); break; } case '[object Array]': classNames[key] = innerCollection.reduce((acc, cl) => (acc += cl + ' '), ''); break; case '[object String]': classNames[key] = innerCollection; break; } }); return classNames; } ClassList( obj );
forEach & concatenate join
function ClassList(collection={}) { const classNames = {}; const keys = Object.keys(collection); keys.forEach((key) => { const innerCollection = collection[key]; const collectionCheck = Object.prototype.toString.call(innerCollection); switch (collectionCheck) { case '[object Object]': { const innerKeys = Object.keys(innerCollection); if (innerKeys.length === 0) { classNames[key] = ''; break; } let classList = []; innerKeys.forEach((innerKey) => { if (!innerCollection[innerKey] || !innerCollection[innerKey].length) { return; } const innerCollectionCheck = Object.prototype.toString.call(innerCollection[innerKey]); switch (innerCollectionCheck) { case '[object Array]': classList.push(...innerCollection[innerKey]); break; case '[object String]': classList.push(innerCollection[innerKey]); break; } }); classNames[key] = classList.join(' '); break; } case '[object Array]': classNames[key] = innerCollection.join(' '); break; case '[object String]': classNames[key] = innerCollection; break; } }); return classNames; } ClassList( obj );
for .. of & concatenate reduce
function ClassList(collection={}) { const classNames = {}; const keys = Object.keys(collection); for (const key of keys) { if ( Object.prototype.hasOwnProperty.call(collection, key) ) { const innerCollection = collection[key]; const collectionCheck = Object.prototype.toString.call(innerCollection); switch (collectionCheck) { case '[object Object]': { const innerKeys = Object.keys(innerCollection); if (innerKeys.length === 0) { classNames[key] = ''; break; } let classList = []; innerKeysLoop: for (const innerKey of innerKeys) { if (!innerCollection[innerKey] || !innerCollection[innerKey].length) { continue innerKeysLoop; } const innerCollectionCheck = Object.prototype.toString.call(innerCollection[innerKey]); switch (innerCollectionCheck) { case '[object Array]': classList.push(...innerCollection[innerKey]); break; case '[object String]': classList.push(innerCollection[innerKey]); break; } } classNames[key] = classList.reduce((acc, cl) => (acc += cl + ' '), ''); break; } case '[object Array]': classNames[key] = innerCollection.reduce((acc, cl) => (acc += cl + ' '), ''); break; case '[object String]': classNames[key] = innerCollection; break; } } } return classNames; } ClassList( obj );
for .. of & concatenate join
function ClassList(collection={}) { const classNames = {}; const keys = Object.keys(collection); for (const key of keys) { if ( Object.prototype.hasOwnProperty.call(collection, key) ) { const innerCollection = collection[key]; const collectionCheck = Object.prototype.toString.call(innerCollection); switch (collectionCheck) { case '[object Object]': { const innerKeys = Object.keys(innerCollection); if (innerKeys.length === 0) { classNames[key] = ''; break; } let classList = []; innerKeysLoop: for (const innerKey of innerKeys) { if (!innerCollection[innerKey] || !innerCollection[innerKey].length) { continue innerKeysLoop; } const innerCollectionCheck = Object.prototype.toString.call(innerCollection[innerKey]); switch (innerCollectionCheck) { case '[object Array]': classList.push(...innerCollection[innerKey]); break; case '[object String]': classList.push(innerCollection[innerKey]); break; } } classNames[key] = classList.join(' '); break; } case '[object Array]': classNames[key] = innerCollection.join(' '); break; case '[object String]': classNames[key] = innerCollection; break; } } } return classNames; } ClassList( obj );

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
forEach & concatenate reduce
forEach & concatenate join
for .. of & concatenate reduce
for .. of & concatenate join

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1.2 Safari/605.1.15

Browser/OS: Safari 13 on Mac OS X 10.15.6

View result in a separate tab

Test name	Executions per second
forEach & concatenate reduce	2063.4 Ops/sec
forEach & concatenate join	1931.7 Ops/sec
for .. of & concatenate reduce	1930.4 Ops/sec
for .. of & concatenate join	1938.7 Ops/sec

ClassList v2 (version: 0)

Comparing performance of: forEach & concatenate reduce vs forEach & concatenate join vs for .. of & concatenate reduce vs for .. of & concatenate join

Created: 3 years ago by: Guest

Jump to the latest result

forEach & concatenate reduce

forEach & concatenate join

for .. of & concatenate reduce

for .. of & concatenate join

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A