Comment by nostrademons

I remember doing this back in 2006 before Chrome even came out. Remember when it was a good idea to cache the .length property because it was O(N) on some browser (I think an early IE), so you'd write your for-loops like this?

  for (var i = 0, len = arr.length; i < len; ++i) { ... }

Hell, the whole premise for React (the virtual DOM) is based on outdated performance advice. Chrome has used a dirty-bit for DOM manipulations since a year or two after React came out; manipulating the DOM is within a factor of ~2-4 of setting a property on a JS object (and much faster than constructing & copying whole new JS objects, which incurs a GC cost), it's just that you really want to avoid interspersed manipulations & queries, which force a page reflow:

  parent.appendChild(document.createElement('div'));   // Fast; ~50 us
  let w = parent.innerWidth;                           // Slow, forces reflow; ~20 ms
  let h = parent.innerHeight;                          // Fast again; no page modifications
  parent.appendChild(document.createElement('div'));   // Fast; just sets dirty bit
  parent.appendChild(document.createElement('div'));   // Still fast; dirty bit already set

But that's the nature of a lot of technical rules of thumb. They get stale as the underlying stack beneath them changes.