Neil's News

JavaScript Loops

7 June 2021

As JavaScript interpreters get more sophisticated, their performance behaviours get more complex and more challenging to understand. Let's take the following code which counts to 100 million:

console.time('100M test');
for (var i = 0; i < 100000000; i++) {
  if (i === null) alert();
}
console.timeEnd('100M test');

How you run this code make a huge difference.

	Chrome 91	Firefox 89	Safari 14
Pasted into console	284 ms	40,800 ms	256 ms
Run in a webpage in the global scope	310 ms	640 ms	256 ms
Run in a strict or non-strict function scope	cold: 300 ms warm: 32 ms	60 ms	cold: 256 ms warm: 85 ms
Run in a non-strict function scope using eval	35,173 ms	2,451 ms	35,690 ms
Run in a strict function scope using eval	300 ms	1,100 ms	18,077 ms

These tests reveal several important facts when dealing with performant code.

1. Never write code at the global scope. Create a function, then call it (or use an Immediately Invoked Function Expression (IIFE)).
2. Never paste code straight into the console when measuring performance. Create a function, then call it (or use an IIFE), all of which may be done from the console.
3. Never define a helper function inside a function, since it will start cold every time.
4. Never use eval, especially in non-strict mode. For user-defined dynamic code, use (new Function(...))(); instead of eval(...);

With this out of the way, here's a simple tool that wraps the user-provided code inside a function, runs it five times (to allow the function to 'warm up'), and prints the results to the browser console.

console.time('100M test'); for (var i = 0; i < 100000000; i++) { if (i === null) alert(); } console.timeEnd('100M test');

Chrome 91: 290 - 32 ms Firefox 89: 60 ms Safari 14: 256 - 85 ms Run in console

Now that we know the environment in which to run performant code, let's look at the best ways to loop in JavaScript. First let's try a simple "for" loop.

var a = Array(1000).fill({}); console.time('for loop'); for (var n = 0; n < 100000; n++) { for (var i = 0; i < a.length; i++) { var value = a[i]; if (value === 123) alert(); } } console.timeEnd('for loop');

Chrome 91: 500 ms Firefox 89: 150 ms Safari 14: 160 ms Run in console

One optimization is to cache the length. This has a noticeable speed up in Chrome, at the expense of a small penalty in Firefox.

var a = Array(1000).fill({}); console.time('for loop with cached length'); for (var n = 0; n < 100000; n++) { for (var i = 0, len = a.length; i < len; i++) { var value = a[i]; if (value === 123) alert(); } } console.timeEnd('for loop with cached length');

Chrome 91: 440 ms Firefox 89: 160 ms Safari 14: 160 ms Run in console

ES6 adds the "for-of" loop. It's just a performance disaster in every browser. Avoid this construct for performant code.

var a = Array(1000).fill({}); console.time('for-of loop'); for (var n = 0; n < 100000; n++) { for (var value of a) { if (value === 123) alert(); } } console.timeEnd('for-of loop');

Chrome 91: 540 ms Firefox 89: 930 ms Safari 14: 262 ms Run in console

Likewise, the technique of looping through non-falsy values without checking length is not advisable.

var a = Array(1000).fill({}); console.time('for value loop'); for (var n = 0; n < 100000; n++) { for (var i = 0, value; (value = a[i]); i++) { if (value === 123) alert(); } } console.timeEnd('for value loop');

Chrome 91: 540 ms Firefox 89: 508 ms Safari 14: 190 ms Run in console

Not surprisingly, "while" loops are the same as "for" loops. Just more verbose.

var a = Array(1000).fill({}); console.time('while loop'); for (var n = 0; n < 100000; n++) { var i = 0, len = a.length; while (i < len) { var value = a[i]; if (value === 123) alert(); i++; } } console.timeEnd('while loop');

Chrome 91: 440 ms Firefox 89: 160 ms Safari 14: 160 ms Run in console

The performance of unrolled loops is wild. Horrible initial penalty when cold, then dramatic warmup after one or two executions.

var a = Array(1000).fill({}); console.time('unrolled loop'); for (var n = 0; n < 100000; n++) { if (a[0] === 123) alert(); if (a[1] === 123) alert(); if (a[2] === 123) alert(); if (a[3] === 123) alert(); if (a[4] === 123) alert(); if (a[5] === 123) alert(); if (a[6] === 123) alert(); if (a[7] === 123) alert(); if (a[8] === 123) alert(); if (a[9] === 123) alert(); if (a[10] === 123) alert(); if (a[11] === 123) alert(); if (a[12] === 123) alert(); if (a[13] === 123) alert(); if (a[14] === 123) alert(); if (a[15] === 123) alert(); if (a[16] === 123) alert(); if (a[17] === 123) alert(); if (a[18] === 123) alert(); if (a[19] === 123) alert(); if (a[20] === 123) alert(); if (a[21] === 123) alert(); if (a[22] === 123) alert(); if (a[23] === 123) alert(); if (a[24] === 123) alert(); if (a[25] === 123) alert(); if (a[26] === 123) alert(); if (a[27] === 123) alert(); if (a[28] === 123) alert(); if (a[29] === 123) alert(); if (a[30] === 123) alert(); if (a[31] === 123) alert(); if (a[32] === 123) alert(); if (a[33] === 123) alert(); if (a[34] === 123) alert(); if (a[35] === 123) alert(); if (a[36] === 123) alert(); if (a[37] === 123) alert(); if (a[38] === 123) alert(); if (a[39] === 123) alert(); if (a[40] === 123) alert(); if (a[41] === 123) alert(); if (a[42] === 123) alert(); if (a[43] === 123) alert(); if (a[44] === 123) alert(); if (a[45] === 123) alert(); if (a[46] === 123) alert(); if (a[47] === 123) alert(); if (a[48] === 123) alert(); if (a[49] === 123) alert(); if (a[51] === 123) alert(); if (a[52] === 123) alert(); if (a[53] === 123) alert(); if (a[54] === 123) alert(); if (a[55] === 123) alert(); if (a[56] === 123) alert(); if (a[57] === 123) alert(); if (a[58] === 123) alert(); if (a[59] === 123) alert(); if (a[60] === 123) alert(); if (a[61] === 123) alert(); if (a[62] === 123) alert(); if (a[63] === 123) alert(); if (a[64] === 123) alert(); if (a[65] === 123) alert(); if (a[66] === 123) alert(); if (a[67] === 123) alert(); if (a[68] === 123) alert(); if (a[69] === 123) alert(); if (a[70] === 123) alert(); if (a[71] === 123) alert(); if (a[72] === 123) alert(); if (a[73] === 123) alert(); if (a[74] === 123) alert(); if (a[75] === 123) alert(); if (a[76] === 123) alert(); if (a[77] === 123) alert(); if (a[78] === 123) alert(); if (a[79] === 123) alert(); if (a[80] === 123) alert(); if (a[81] === 123) alert(); if (a[82] === 123) alert(); if (a[83] === 123) alert(); if (a[84] === 123) alert(); if (a[85] === 123) alert(); if (a[86] === 123) alert(); if (a[87] === 123) alert(); if (a[88] === 123) alert(); if (a[89] === 123) alert(); if (a[90] === 123) alert(); if (a[91] === 123) alert(); if (a[92] === 123) alert(); if (a[93] === 123) alert(); if (a[94] === 123) alert(); if (a[95] === 123) alert(); if (a[96] === 123) alert(); if (a[97] === 123) alert(); if (a[98] === 123) alert(); if (a[99] === 123) alert(); if (a[100] === 123) alert(); if (a[101] === 123) alert(); if (a[102] === 123) alert(); if (a[103] === 123) alert(); if (a[104] === 123) alert(); if (a[105] === 123) alert(); if (a[106] === 123) alert(); if (a[107] === 123) alert(); if (a[108] === 123) alert(); if (a[109] === 123) alert(); if (a[110] === 123) alert(); if (a[111] === 123) alert(); if (a[112] === 123) alert(); if (a[113] === 123) alert(); if (a[114] === 123) alert(); if (a[115] === 123) alert(); if (a[116] === 123) alert(); if (a[117] === 123) alert(); if (a[118] === 123) alert(); if (a[119] === 123) alert(); if (a[120] === 123) alert(); if (a[121] === 123) alert(); if (a[122] === 123) alert(); if (a[123] === 123) alert(); if (a[124] === 123) alert(); if (a[125] === 123) alert(); if (a[126] === 123) alert(); if (a[127] === 123) alert(); if (a[128] === 123) alert(); if (a[129] === 123) alert(); if (a[130] === 123) alert(); if (a[131] === 123) alert(); if (a[132] === 123) alert(); if (a[133] === 123) alert(); if (a[134] === 123) alert(); if (a[135] === 123) alert(); if (a[136] === 123) alert(); if (a[137] === 123) alert(); if (a[138] === 123) alert(); if (a[139] === 123) alert(); if (a[140] === 123) alert(); if (a[141] === 123) alert(); if (a[142] === 123) alert(); if (a[143] === 123) alert(); if (a[144] === 123) alert(); if (a[145] === 123) alert(); if (a[146] === 123) alert(); if (a[147] === 123) alert(); if (a[148] === 123) alert(); if (a[149] === 123) alert(); if (a[150] === 123) alert(); if (a[151] === 123) alert(); if (a[152] === 123) alert(); if (a[153] === 123) alert(); if (a[154] === 123) alert(); if (a[155] === 123) alert(); if (a[156] === 123) alert(); if (a[157] === 123) alert(); if (a[158] === 123) alert(); if (a[159] === 123) alert(); if (a[160] === 123) alert(); if (a[161] === 123) alert(); if (a[162] === 123) alert(); if (a[163] === 123) alert(); if (a[164] === 123) alert(); if (a[165] === 123) alert(); if (a[166] === 123) alert(); if (a[167] === 123) alert(); if (a[168] === 123) alert(); if (a[169] === 123) alert(); if (a[170] === 123) alert(); if (a[171] === 123) alert(); if (a[172] === 123) alert(); if (a[173] === 123) alert(); if (a[174] === 123) alert(); if (a[175] === 123) alert(); if (a[176] === 123) alert(); if (a[177] === 123) alert(); if (a[178] === 123) alert(); if (a[179] === 123) alert(); if (a[180] === 123) alert(); if (a[181] === 123) alert(); if (a[182] === 123) alert(); if (a[183] === 123) alert(); if (a[184] === 123) alert(); if (a[185] === 123) alert(); if (a[186] === 123) alert(); if (a[187] === 123) alert(); if (a[188] === 123) alert(); if (a[189] === 123) alert(); if (a[190] === 123) alert(); if (a[191] === 123) alert(); if (a[192] === 123) alert(); if (a[193] === 123) alert(); if (a[194] === 123) alert(); if (a[195] === 123) alert(); if (a[196] === 123) alert(); if (a[197] === 123) alert(); if (a[198] === 123) alert(); if (a[199] === 123) alert(); if (a[200] === 123) alert(); if (a[201] === 123) alert(); if (a[202] === 123) alert(); if (a[203] === 123) alert(); if (a[204] === 123) alert(); if (a[205] === 123) alert(); if (a[206] === 123) alert(); if (a[207] === 123) alert(); if (a[208] === 123) alert(); if (a[209] === 123) alert(); if (a[210] === 123) alert(); if (a[211] === 123) alert(); if (a[212] === 123) alert(); if (a[213] === 123) alert(); if (a[214] === 123) alert(); if (a[215] === 123) alert(); if (a[216] === 123) alert(); if (a[217] === 123) alert(); if (a[218] === 123) alert(); if (a[219] === 123) alert(); if (a[220] === 123) alert(); if (a[221] === 123) alert(); if (a[222] === 123) alert(); if (a[223] === 123) alert(); if (a[224] === 123) alert(); if (a[225] === 123) alert(); if (a[226] === 123) alert(); if (a[227] === 123) alert(); if (a[228] === 123) alert(); if (a[229] === 123) alert(); if (a[230] === 123) alert(); if (a[231] === 123) alert(); if (a[232] === 123) alert(); if (a[233] === 123) alert(); if (a[234] === 123) alert(); if (a[235] === 123) alert(); if (a[236] === 123) alert(); if (a[237] === 123) alert(); if (a[238] === 123) alert(); if (a[239] === 123) alert(); if (a[240] === 123) alert(); if (a[241] === 123) alert(); if (a[242] === 123) alert(); if (a[243] === 123) alert(); if (a[244] === 123) alert(); if (a[245] === 123) alert(); if (a[246] === 123) alert(); if (a[247] === 123) alert(); if (a[248] === 123) alert(); if (a[249] === 123) alert(); if (a[250] === 123) alert(); if (a[251] === 123) alert(); if (a[252] === 123) alert(); if (a[253] === 123) alert(); if (a[254] === 123) alert(); if (a[255] === 123) alert(); if (a[256] === 123) alert(); if (a[257] === 123) alert(); if (a[258] === 123) alert(); if (a[259] === 123) alert(); if (a[260] === 123) alert(); if (a[261] === 123) alert(); if (a[262] === 123) alert(); if (a[263] === 123) alert(); if (a[264] === 123) alert(); if (a[265] === 123) alert(); if (a[266] === 123) alert(); if (a[267] === 123) alert(); if (a[268] === 123) alert(); if (a[269] === 123) alert(); if (a[270] === 123) alert(); if (a[271] === 123) alert(); if (a[272] === 123) alert(); if (a[273] === 123) alert(); if (a[274] === 123) alert(); if (a[275] === 123) alert(); if (a[276] === 123) alert(); if (a[277] === 123) alert(); if (a[278] === 123) alert(); if (a[279] === 123) alert(); if (a[280] === 123) alert(); if (a[281] === 123) alert(); if (a[282] === 123) alert(); if (a[283] === 123) alert(); if (a[284] === 123) alert(); if (a[285] === 123) alert(); if (a[286] === 123) alert(); if (a[287] === 123) alert(); if (a[288] === 123) alert(); if (a[289] === 123) alert(); if (a[290] === 123) alert(); if (a[291] === 123) alert(); if (a[292] === 123) alert(); if (a[293] === 123) alert(); if (a[294] === 123) alert(); if (a[295] === 123) alert(); if (a[296] === 123) alert(); if (a[297] === 123) alert(); if (a[298] === 123) alert(); if (a[299] === 123) alert(); if (a[300] === 123) alert(); if (a[301] === 123) alert(); if (a[302] === 123) alert(); if (a[303] === 123) alert(); if (a[304] === 123) alert(); if (a[305] === 123) alert(); if (a[306] === 123) alert(); if (a[307] === 123) alert(); if (a[308] === 123) alert(); if (a[309] === 123) alert(); if (a[310] === 123) alert(); if (a[311] === 123) alert(); if (a[312] === 123) alert(); if (a[313] === 123) alert(); if (a[314] === 123) alert(); if (a[315] === 123) alert(); if (a[316] === 123) alert(); if (a[317] === 123) alert(); if (a[318] === 123) alert(); if (a[319] === 123) alert(); if (a[320] === 123) alert(); if (a[321] === 123) alert(); if (a[322] === 123) alert(); if (a[323] === 123) alert(); if (a[324] === 123) alert(); if (a[325] === 123) alert(); if (a[326] === 123) alert(); if (a[327] === 123) alert(); if (a[328] === 123) alert(); if (a[329] === 123) alert(); if (a[330] === 123) alert(); if (a[331] === 123) alert(); if (a[332] === 123) alert(); if (a[333] === 123) alert(); if (a[334] === 123) alert(); if (a[335] === 123) alert(); if (a[336] === 123) alert(); if (a[337] === 123) alert(); if (a[338] === 123) alert(); if (a[339] === 123) alert(); if (a[340] === 123) alert(); if (a[341] === 123) alert(); if (a[342] === 123) alert(); if (a[343] === 123) alert(); if (a[344] === 123) alert(); if (a[345] === 123) alert(); if (a[346] === 123) alert(); if (a[347] === 123) alert(); if (a[348] === 123) alert(); if (a[349] === 123) alert(); if (a[350] === 123) alert(); if (a[351] === 123) alert(); if (a[352] === 123) alert(); if (a[353] === 123) alert(); if (a[354] === 123) alert(); if (a[355] === 123) alert(); if (a[356] === 123) alert(); if (a[357] === 123) alert(); if (a[358] === 123) alert(); if (a[359] === 123) alert(); if (a[360] === 123) alert(); if (a[361] === 123) alert(); if (a[362] === 123) alert(); if (a[363] === 123) alert(); if (a[364] === 123) alert(); if (a[365] === 123) alert(); if (a[366] === 123) alert(); if (a[367] === 123) alert(); if (a[368] === 123) alert(); if (a[369] === 123) alert(); if (a[370] === 123) alert(); if (a[371] === 123) alert(); if (a[372] === 123) alert(); if (a[373] === 123) alert(); if (a[374] === 123) alert(); if (a[375] === 123) alert(); if (a[376] === 123) alert(); if (a[377] === 123) alert(); if (a[378] === 123) alert(); if (a[379] === 123) alert(); if (a[380] === 123) alert(); if (a[381] === 123) alert(); if (a[382] === 123) alert(); if (a[383] === 123) alert(); if (a[384] === 123) alert(); if (a[385] === 123) alert(); if (a[386] === 123) alert(); if (a[387] === 123) alert(); if (a[388] === 123) alert(); if (a[389] === 123) alert(); if (a[390] === 123) alert(); if (a[391] === 123) alert(); if (a[392] === 123) alert(); if (a[393] === 123) alert(); if (a[394] === 123) alert(); if (a[395] === 123) alert(); if (a[396] === 123) alert(); if (a[397] === 123) alert(); if (a[398] === 123) alert(); if (a[399] === 123) alert(); if (a[400] === 123) alert(); if (a[401] === 123) alert(); if (a[402] === 123) alert(); if (a[403] === 123) alert(); if (a[404] === 123) alert(); if (a[405] === 123) alert(); if (a[406] === 123) alert(); if (a[407] === 123) alert(); if (a[408] === 123) alert(); if (a[409] === 123) alert(); if (a[410] === 123) alert(); if (a[411] === 123) alert(); if (a[412] === 123) alert(); if (a[413] === 123) alert(); if (a[414] === 123) alert(); if (a[415] === 123) alert(); if (a[416] === 123) alert(); if (a[417] === 123) alert(); if (a[418] === 123) alert(); if (a[419] === 123) alert(); if (a[420] === 123) alert(); if (a[421] === 123) alert(); if (a[422] === 123) alert(); if (a[423] === 123) alert(); if (a[424] === 123) alert(); if (a[425] === 123) alert(); if (a[426] === 123) alert(); if (a[427] === 123) alert(); if (a[428] === 123) alert(); if (a[429] === 123) alert(); if (a[430] === 123) alert(); if (a[431] === 123) alert(); if (a[432] === 123) alert(); if (a[433] === 123) alert(); if (a[434] === 123) alert(); if (a[435] === 123) alert(); if (a[436] === 123) alert(); if (a[437] === 123) alert(); if (a[438] === 123) alert(); if (a[439] === 123) alert(); if (a[440] === 123) alert(); if (a[441] === 123) alert(); if (a[442] === 123) alert(); if (a[443] === 123) alert(); if (a[444] === 123) alert(); if (a[445] === 123) alert(); if (a[446] === 123) alert(); if (a[447] === 123) alert(); if (a[448] === 123) alert(); if (a[449] === 123) alert(); if (a[450] === 123) alert(); if (a[451] === 123) alert(); if (a[452] === 123) alert(); if (a[453] === 123) alert(); if (a[454] === 123) alert(); if (a[455] === 123) alert(); if (a[456] === 123) alert(); if (a[457] === 123) alert(); if (a[458] === 123) alert(); if (a[459] === 123) alert(); if (a[460] === 123) alert(); if (a[461] === 123) alert(); if (a[462] === 123) alert(); if (a[463] === 123) alert(); if (a[464] === 123) alert(); if (a[465] === 123) alert(); if (a[466] === 123) alert(); if (a[467] === 123) alert(); if (a[468] === 123) alert(); if (a[469] === 123) alert(); if (a[470] === 123) alert(); if (a[471] === 123) alert(); if (a[472] === 123) alert(); if (a[473] === 123) alert(); if (a[474] === 123) alert(); if (a[475] === 123) alert(); if (a[476] === 123) alert(); if (a[477] === 123) alert(); if (a[478] === 123) alert(); if (a[479] === 123) alert(); if (a[480] === 123) alert(); if (a[481] === 123) alert(); if (a[482] === 123) alert(); if (a[483] === 123) alert(); if (a[484] === 123) alert(); if (a[485] === 123) alert(); if (a[486] === 123) alert(); if (a[487] === 123) alert(); if (a[488] === 123) alert(); if (a[489] === 123) alert(); if (a[490] === 123) alert(); if (a[491] === 123) alert(); if (a[492] === 123) alert(); if (a[493] === 123) alert(); if (a[494] === 123) alert(); if (a[495] === 123) alert(); if (a[496] === 123) alert(); if (a[497] === 123) alert(); if (a[498] === 123) alert(); if (a[499] === 123) alert(); if (a[500] === 123) alert(); if (a[501] === 123) alert(); if (a[502] === 123) alert(); if (a[503] === 123) alert(); if (a[504] === 123) alert(); if (a[505] === 123) alert(); if (a[506] === 123) alert(); if (a[507] === 123) alert(); if (a[508] === 123) alert(); if (a[509] === 123) alert(); if (a[510] === 123) alert(); if (a[511] === 123) alert(); if (a[512] === 123) alert(); if (a[513] === 123) alert(); if (a[514] === 123) alert(); if (a[515] === 123) alert(); if (a[516] === 123) alert(); if (a[517] === 123) alert(); if (a[518] === 123) alert(); if (a[519] === 123) alert(); if (a[520] === 123) alert(); if (a[521] === 123) alert(); if (a[522] === 123) alert(); if (a[523] === 123) alert(); if (a[524] === 123) alert(); if (a[525] === 123) alert(); if (a[526] === 123) alert(); if (a[527] === 123) alert(); if (a[528] === 123) alert(); if (a[529] === 123) alert(); if (a[530] === 123) alert(); if (a[531] === 123) alert(); if (a[532] === 123) alert(); if (a[533] === 123) alert(); if (a[534] === 123) alert(); if (a[535] === 123) alert(); if (a[536] === 123) alert(); if (a[537] === 123) alert(); if (a[538] === 123) alert(); if (a[539] === 123) alert(); if (a[540] === 123) alert(); if (a[541] === 123) alert(); if (a[542] === 123) alert(); if (a[543] === 123) alert(); if (a[544] === 123) alert(); if (a[545] === 123) alert(); if (a[546] === 123) alert(); if (a[547] === 123) alert(); if (a[548] === 123) alert(); if (a[549] === 123) alert(); if (a[550] === 123) alert(); if (a[551] === 123) alert(); if (a[552] === 123) alert(); if (a[553] === 123) alert(); if (a[554] === 123) alert(); if (a[555] === 123) alert(); if (a[556] === 123) alert(); if (a[557] === 123) alert(); if (a[558] === 123) alert(); if (a[559] === 123) alert(); if (a[560] === 123) alert(); if (a[561] === 123) alert(); if (a[562] === 123) alert(); if (a[563] === 123) alert(); if (a[564] === 123) alert(); if (a[565] === 123) alert(); if (a[566] === 123) alert(); if (a[567] === 123) alert(); if (a[568] === 123) alert(); if (a[569] === 123) alert(); if (a[570] === 123) alert(); if (a[571] === 123) alert(); if (a[572] === 123) alert(); if (a[573] === 123) alert(); if (a[574] === 123) alert(); if (a[575] === 123) alert(); if (a[576] === 123) alert(); if (a[577] === 123) alert(); if (a[578] === 123) alert(); if (a[579] === 123) alert(); if (a[580] === 123) alert(); if (a[581] === 123) alert(); if (a[582] === 123) alert(); if (a[583] === 123) alert(); if (a[584] === 123) alert(); if (a[585] === 123) alert(); if (a[586] === 123) alert(); if (a[587] === 123) alert(); if (a[588] === 123) alert(); if (a[589] === 123) alert(); if (a[590] === 123) alert(); if (a[591] === 123) alert(); if (a[592] === 123) alert(); if (a[593] === 123) alert(); if (a[594] === 123) alert(); if (a[595] === 123) alert(); if (a[596] === 123) alert(); if (a[597] === 123) alert(); if (a[598] === 123) alert(); if (a[599] === 123) alert(); if (a[600] === 123) alert(); if (a[601] === 123) alert(); if (a[602] === 123) alert(); if (a[603] === 123) alert(); if (a[604] === 123) alert(); if (a[605] === 123) alert(); if (a[606] === 123) alert(); if (a[607] === 123) alert(); if (a[608] === 123) alert(); if (a[609] === 123) alert(); if (a[610] === 123) alert(); if (a[611] === 123) alert(); if (a[612] === 123) alert(); if (a[613] === 123) alert(); if (a[614] === 123) alert(); if (a[615] === 123) alert(); if (a[616] === 123) alert(); if (a[617] === 123) alert(); if (a[618] === 123) alert(); if (a[619] === 123) alert(); if (a[620] === 123) alert(); if (a[621] === 123) alert(); if (a[622] === 123) alert(); if (a[623] === 123) alert(); if (a[624] === 123) alert(); if (a[625] === 123) alert(); if (a[626] === 123) alert(); if (a[627] === 123) alert(); if (a[628] === 123) alert(); if (a[629] === 123) alert(); if (a[630] === 123) alert(); if (a[631] === 123) alert(); if (a[632] === 123) alert(); if (a[633] === 123) alert(); if (a[634] === 123) alert(); if (a[635] === 123) alert(); if (a[636] === 123) alert(); if (a[637] === 123) alert(); if (a[638] === 123) alert(); if (a[639] === 123) alert(); if (a[640] === 123) alert(); if (a[641] === 123) alert(); if (a[642] === 123) alert(); if (a[643] === 123) alert(); if (a[644] === 123) alert(); if (a[645] === 123) alert(); if (a[646] === 123) alert(); if (a[647] === 123) alert(); if (a[648] === 123) alert(); if (a[649] === 123) alert(); if (a[650] === 123) alert(); if (a[651] === 123) alert(); if (a[652] === 123) alert(); if (a[653] === 123) alert(); if (a[654] === 123) alert(); if (a[655] === 123) alert(); if (a[656] === 123) alert(); if (a[657] === 123) alert(); if (a[658] === 123) alert(); if (a[659] === 123) alert(); if (a[660] === 123) alert(); if (a[661] === 123) alert(); if (a[662] === 123) alert(); if (a[663] === 123) alert(); if (a[664] === 123) alert(); if (a[665] === 123) alert(); if (a[666] === 123) alert(); if (a[667] === 123) alert(); if (a[668] === 123) alert(); if (a[669] === 123) alert(); if (a[670] === 123) alert(); if (a[671] === 123) alert(); if (a[672] === 123) alert(); if (a[673] === 123) alert(); if (a[674] === 123) alert(); if (a[675] === 123) alert(); if (a[676] === 123) alert(); if (a[677] === 123) alert(); if (a[678] === 123) alert(); if (a[679] === 123) alert(); if (a[680] === 123) alert(); if (a[681] === 123) alert(); if (a[682] === 123) alert(); if (a[683] === 123) alert(); if (a[684] === 123) alert(); if (a[685] === 123) alert(); if (a[686] === 123) alert(); if (a[687] === 123) alert(); if (a[688] === 123) alert(); if (a[689] === 123) alert(); if (a[690] === 123) alert(); if (a[691] === 123) alert(); if (a[692] === 123) alert(); if (a[693] === 123) alert(); if (a[694] === 123) alert(); if (a[695] === 123) alert(); if (a[696] === 123) alert(); if (a[697] === 123) alert(); if (a[698] === 123) alert(); if (a[699] === 123) alert(); if (a[700] === 123) alert(); if (a[701] === 123) alert(); if (a[702] === 123) alert(); if (a[703] === 123) alert(); if (a[704] === 123) alert(); if (a[705] === 123) alert(); if (a[706] === 123) alert(); if (a[707] === 123) alert(); if (a[708] === 123) alert(); if (a[709] === 123) alert(); if (a[710] === 123) alert(); if (a[711] === 123) alert(); if (a[712] === 123) alert(); if (a[713] === 123) alert(); if (a[714] === 123) alert(); if (a[715] === 123) alert(); if (a[716] === 123) alert(); if (a[717] === 123) alert(); if (a[718] === 123) alert(); if (a[719] === 123) alert(); if (a[720] === 123) alert(); if (a[721] === 123) alert(); if (a[722] === 123) alert(); if (a[723] === 123) alert(); if (a[724] === 123) alert(); if (a[725] === 123) alert(); if (a[726] === 123) alert(); if (a[727] === 123) alert(); if (a[728] === 123) alert(); if (a[729] === 123) alert(); if (a[730] === 123) alert(); if (a[731] === 123) alert(); if (a[732] === 123) alert(); if (a[733] === 123) alert(); if (a[734] === 123) alert(); if (a[735] === 123) alert(); if (a[736] === 123) alert(); if (a[737] === 123) alert(); if (a[738] === 123) alert(); if (a[739] === 123) alert(); if (a[740] === 123) alert(); if (a[741] === 123) alert(); if (a[742] === 123) alert(); if (a[743] === 123) alert(); if (a[744] === 123) alert(); if (a[745] === 123) alert(); if (a[746] === 123) alert(); if (a[747] === 123) alert(); if (a[748] === 123) alert(); if (a[749] === 123) alert(); if (a[750] === 123) alert(); if (a[751] === 123) alert(); if (a[752] === 123) alert(); if (a[753] === 123) alert(); if (a[754] === 123) alert(); if (a[755] === 123) alert(); if (a[756] === 123) alert(); if (a[757] === 123) alert(); if (a[758] === 123) alert(); if (a[759] === 123) alert(); if (a[760] === 123) alert(); if (a[761] === 123) alert(); if (a[762] === 123) alert(); if (a[763] === 123) alert(); if (a[764] === 123) alert(); if (a[765] === 123) alert(); if (a[766] === 123) alert(); if (a[767] === 123) alert(); if (a[768] === 123) alert(); if (a[769] === 123) alert(); if (a[770] === 123) alert(); if (a[771] === 123) alert(); if (a[772] === 123) alert(); if (a[773] === 123) alert(); if (a[774] === 123) alert(); if (a[775] === 123) alert(); if (a[776] === 123) alert(); if (a[777] === 123) alert(); if (a[778] === 123) alert(); if (a[779] === 123) alert(); if (a[780] === 123) alert(); if (a[781] === 123) alert(); if (a[782] === 123) alert(); if (a[783] === 123) alert(); if (a[784] === 123) alert(); if (a[785] === 123) alert(); if (a[786] === 123) alert(); if (a[787] === 123) alert(); if (a[788] === 123) alert(); if (a[789] === 123) alert(); if (a[790] === 123) alert(); if (a[791] === 123) alert(); if (a[792] === 123) alert(); if (a[793] === 123) alert(); if (a[794] === 123) alert(); if (a[795] === 123) alert(); if (a[796] === 123) alert(); if (a[797] === 123) alert(); if (a[798] === 123) alert(); if (a[799] === 123) alert(); if (a[800] === 123) alert(); if (a[801] === 123) alert(); if (a[802] === 123) alert(); if (a[803] === 123) alert(); if (a[804] === 123) alert(); if (a[805] === 123) alert(); if (a[806] === 123) alert(); if (a[807] === 123) alert(); if (a[808] === 123) alert(); if (a[809] === 123) alert(); if (a[810] === 123) alert(); if (a[811] === 123) alert(); if (a[812] === 123) alert(); if (a[813] === 123) alert(); if (a[814] === 123) alert(); if (a[815] === 123) alert(); if (a[816] === 123) alert(); if (a[817] === 123) alert(); if (a[818] === 123) alert(); if (a[819] === 123) alert(); if (a[820] === 123) alert(); if (a[821] === 123) alert(); if (a[822] === 123) alert(); if (a[823] === 123) alert(); if (a[824] === 123) alert(); if (a[825] === 123) alert(); if (a[826] === 123) alert(); if (a[827] === 123) alert(); if (a[828] === 123) alert(); if (a[829] === 123) alert(); if (a[830] === 123) alert(); if (a[831] === 123) alert(); if (a[832] === 123) alert(); if (a[833] === 123) alert(); if (a[834] === 123) alert(); if (a[835] === 123) alert(); if (a[836] === 123) alert(); if (a[837] === 123) alert(); if (a[838] === 123) alert(); if (a[839] === 123) alert(); if (a[840] === 123) alert(); if (a[841] === 123) alert(); if (a[842] === 123) alert(); if (a[843] === 123) alert(); if (a[844] === 123) alert(); if (a[845] === 123) alert(); if (a[846] === 123) alert(); if (a[847] === 123) alert(); if (a[848] === 123) alert(); if (a[849] === 123) alert(); if (a[850] === 123) alert(); if (a[851] === 123) alert(); if (a[852] === 123) alert(); if (a[853] === 123) alert(); if (a[854] === 123) alert(); if (a[855] === 123) alert(); if (a[856] === 123) alert(); if (a[857] === 123) alert(); if (a[858] === 123) alert(); if (a[859] === 123) alert(); if (a[860] === 123) alert(); if (a[861] === 123) alert(); if (a[862] === 123) alert(); if (a[863] === 123) alert(); if (a[864] === 123) alert(); if (a[865] === 123) alert(); if (a[866] === 123) alert(); if (a[867] === 123) alert(); if (a[868] === 123) alert(); if (a[869] === 123) alert(); if (a[870] === 123) alert(); if (a[871] === 123) alert(); if (a[872] === 123) alert(); if (a[873] === 123) alert(); if (a[874] === 123) alert(); if (a[875] === 123) alert(); if (a[876] === 123) alert(); if (a[877] === 123) alert(); if (a[878] === 123) alert(); if (a[879] === 123) alert(); if (a[880] === 123) alert(); if (a[881] === 123) alert(); if (a[882] === 123) alert(); if (a[883] === 123) alert(); if (a[884] === 123) alert(); if (a[885] === 123) alert(); if (a[886] === 123) alert(); if (a[887] === 123) alert(); if (a[888] === 123) alert(); if (a[889] === 123) alert(); if (a[890] === 123) alert(); if (a[891] === 123) alert(); if (a[892] === 123) alert(); if (a[893] === 123) alert(); if (a[894] === 123) alert(); if (a[895] === 123) alert(); if (a[896] === 123) alert(); if (a[897] === 123) alert(); if (a[898] === 123) alert(); if (a[899] === 123) alert(); if (a[900] === 123) alert(); if (a[901] === 123) alert(); if (a[902] === 123) alert(); if (a[903] === 123) alert(); if (a[904] === 123) alert(); if (a[905] === 123) alert(); if (a[906] === 123) alert(); if (a[907] === 123) alert(); if (a[908] === 123) alert(); if (a[909] === 123) alert(); if (a[910] === 123) alert(); if (a[911] === 123) alert(); if (a[912] === 123) alert(); if (a[913] === 123) alert(); if (a[914] === 123) alert(); if (a[915] === 123) alert(); if (a[916] === 123) alert(); if (a[917] === 123) alert(); if (a[918] === 123) alert(); if (a[919] === 123) alert(); if (a[920] === 123) alert(); if (a[921] === 123) alert(); if (a[922] === 123) alert(); if (a[923] === 123) alert(); if (a[924] === 123) alert(); if (a[925] === 123) alert(); if (a[926] === 123) alert(); if (a[927] === 123) alert(); if (a[928] === 123) alert(); if (a[929] === 123) alert(); if (a[930] === 123) alert(); if (a[931] === 123) alert(); if (a[932] === 123) alert(); if (a[933] === 123) alert(); if (a[934] === 123) alert(); if (a[935] === 123) alert(); if (a[936] === 123) alert(); if (a[937] === 123) alert(); if (a[938] === 123) alert(); if (a[939] === 123) alert(); if (a[940] === 123) alert(); if (a[941] === 123) alert(); if (a[942] === 123) alert(); if (a[943] === 123) alert(); if (a[944] === 123) alert(); if (a[945] === 123) alert(); if (a[946] === 123) alert(); if (a[947] === 123) alert(); if (a[948] === 123) alert(); if (a[949] === 123) alert(); if (a[950] === 123) alert(); if (a[951] === 123) alert(); if (a[952] === 123) alert(); if (a[953] === 123) alert(); if (a[954] === 123) alert(); if (a[955] === 123) alert(); if (a[956] === 123) alert(); if (a[957] === 123) alert(); if (a[958] === 123) alert(); if (a[959] === 123) alert(); if (a[960] === 123) alert(); if (a[961] === 123) alert(); if (a[962] === 123) alert(); if (a[963] === 123) alert(); if (a[964] === 123) alert(); if (a[965] === 123) alert(); if (a[966] === 123) alert(); if (a[967] === 123) alert(); if (a[968] === 123) alert(); if (a[969] === 123) alert(); if (a[970] === 123) alert(); if (a[971] === 123) alert(); if (a[972] === 123) alert(); if (a[973] === 123) alert(); if (a[974] === 123) alert(); if (a[975] === 123) alert(); if (a[976] === 123) alert(); if (a[977] === 123) alert(); if (a[978] === 123) alert(); if (a[979] === 123) alert(); if (a[980] === 123) alert(); if (a[981] === 123) alert(); if (a[982] === 123) alert(); if (a[983] === 123) alert(); if (a[984] === 123) alert(); if (a[985] === 123) alert(); if (a[986] === 123) alert(); if (a[987] === 123) alert(); if (a[988] === 123) alert(); if (a[989] === 123) alert(); if (a[990] === 123) alert(); if (a[991] === 123) alert(); if (a[992] === 123) alert(); if (a[993] === 123) alert(); if (a[994] === 123) alert(); if (a[995] === 123) alert(); if (a[996] === 123) alert(); if (a[997] === 123) alert(); if (a[998] === 123) alert(); if (a[999] === 123) alert(); } console.timeEnd('unrolled loop');

Chrome 91: 1,600 - 440 ms Firefox 89: 818 - 0 ms Safari 14: 2,570 - 120 ms Run in console

Arrays are not the only thing one loops over. NodeLists are unusual in that they are generators. This changes the performance curves. A regular for loop (with cached length) is much slower on a NodeList than on an array.

var root = document.createElement('p'); for (var x = 0; x < 1000; x++) { root.appendChild(document.createElement('div')); } var a = root.childNodes; console.time('for loop on NodeList with cached length'); for (var n = 0; n < 100000; n++) { for (var i = 0, len = a.length; i < len; i++) { var value = a[i]; if (value === 123) alert(); } } console.timeEnd('for loop on NodeList with cached length');

Chrome 91: 4,650 ms Firefox 89: 3,800 ms Safari 14: 2,740 ms Run in console

The non-falsy value technique which used to be recommended by the Google JS style guide is now slower than a regular loop with cached length.

var root = document.createElement('p'); for (var x = 0; x < 1000; x++) { root.appendChild(document.createElement('div')); } var a = root.childNodes; console.time('for value loop on NodeList'); for (var n = 0; n < 100000; n++) { for (var i = 0, value; (value = a[i]); i++) { if (value === 123) alert(); } } console.timeEnd('for value loop on NodeList');

Chrome 91: 4,750 ms Firefox 89: 3,900 ms Safari 14: 2,900 ms Run in console

Since NodeLists are generator, maybe a "for-of" loop would be faster? Absolutely the opposite.

var root = document.createElement('p'); for (var x = 0; x < 1000; x++) { root.appendChild(document.createElement('div')); } var a = root.childNodes; console.time('for-of loop on NodeList'); for (var n = 0; n < 100000; n++) { for (var value of a) { if (value === 123) alert(); } } console.timeEnd('for-of loop on NodeList');

Chrome 91: 23,500 ms Firefox 89: 9,300 ms Safari 14: 5,000 ms Run in console

So to summarize, when writing performant JS loops:

• Write the code inside a function.
• Use a regular "for(;;)" loop or a "while" loop.
• Cache the length.
• Safari rocks!

This research is accurate as of June 2021. Edge 91 performs identically on all tests as Chrome 91. Sorry, I can't run MSIE on my Mac. Let me know if you have any thoughts.

< Previous | Next >