Benchmark: NodeList For vs Foreach fix

Script Preparation code:

var div = document.createElement('div');
for (let i = 0; i < 1000; i++) {
    div.insertAdjacentHTML('beforeend', `<span>span-${i}<span>`);
}

var list = div.querySelectorAll('span');

Tests:

Default For
for(let i = 0; i < list.length; i++) { list[i].setAttribute('tabindex', '-1'); }
forEach
list.forEach(item => { item.setAttribute('tabindex', '-1'); });
For with length caching
for(let i = 0, length = list.length ; i < length; i++) { list[i].setAttribute('tabindex', '-1'); }
toArray (Array.prototype.slice) and for with caching
const list2 = Array.prototype.slice.call(list); for(let i = 0, length = list2.length ; i < length; i++) { list2[i].setAttribute('tabindex', '-1'); }
toArray (Array.prototype.slice) and for-of
const list2 = Array.prototype.slice.call(list); for(const item of list2) { item.setAttribute('tabindex', '-1'); }
toArray (Array.from) and for
const list2 = Array.from(list); for(let i = 0, length = list2.length ; i < length; i++) { list2[i].setAttribute('tabindex', '-1'); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Default For
forEach
For with length caching
toArray (Array.prototype.slice) and for with caching
toArray (Array.prototype.slice) and for-of
toArray (Array.from) and for

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: 6 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36

Browser/OS: Chrome 118 on Windows

View result in a separate tab

Test name	Executions per second
Default For	1440.4 Ops/sec
forEach	1531.6 Ops/sec
For with length caching	1782.1 Ops/sec
toArray (Array.prototype.slice) and for with caching	1710.1 Ops/sec
toArray (Array.prototype.slice) and for-of	1717.4 Ops/sec
toArray (Array.from) and for	1507.5 Ops/sec

NodeList For vs Foreach fix (version: 0)

Comparing performance of: Default For vs forEach vs For with length caching vs toArray (Array.prototype.slice) and for with caching vs toArray (Array.prototype.slice) and for-of vs toArray (Array.from) and for

Created: 6 months ago by: Guest

Jump to the latest result

Default For

forEach

For with length caching

toArray (Array.prototype.slice) and for with caching

toArray (Array.prototype.slice) and for-of

toArray (Array.from) and for

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A