Run results for: NodeList For vs Foreach fix

Run details:

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: Chrome 118

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
Default For	1438.9 Ops/sec
forEach	1522.1 Ops/sec
For with length caching	1743.0 Ops/sec
toArray (Array.prototype.slice) and for with caching	1686.3 Ops/sec
toArray (Array.prototype.slice) and for-of	1703.5 Ops/sec
toArray (Array.from) and for	1511.6 Ops/sec

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'); }

Run results for: NodeList For vs Foreach fix

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