Increase performance in iterations by caching the .length property

[dvd101x]

Hi,

Recently I found out about the benefits of caching the .length property on iterations.

Although the length property is defined on the array itself, there is still an overhead for doing the lookup on each iteration of the loop. And while recent JavaScript engines may apply optimization in this case, there is no way of telling whether the code will run on one of these newer engines or not.

In fact, leaving out the caching may result in the loop being only half as fast as with the cached length.

I did a test and there is a benefit in firefox of about 10% and no impact on chrome.

I see on some comments in the source code there is an intention to change some of the loops, would it be desirable to also test for caching the length of the array?

Test

(() => {
  // An array of random numbers
  const A = Array.from({
    length: 1e7,
  }, Math.random)
  let num

  console.time('regular')
  num = 0
  for (let i = 0; i < A.length; i++) {
    num += A[i] ** 3
  }
  console.log(num)
  console.timeEnd('regular')

  console.time('caching')
  const Alength = A.length
  num = 0
  for (let i = 0; i < Alength; i++) {
    num += A[i] ** 3
  }
  console.log(num)
  console.timeEnd('caching')
})()

Reference

https://shamansir.github.io/JavaScript-Garden/

[josdejong]

Thanks for looking into this David! It is a small thing to change. How much effect it has can indeed differ, based on how well the JS engine can optimize the code (maybe in the next update of Firefox optimizes this case too 😉).

[dvd101x]

Thanks for reviewing this. I will make a few tests in various browsers and report back, maybe it's already addressed by the build process and will have no impact.