Hacker News Reader

Comment by greggman | Hacker News Reader

And are none of them cached? If I go

    var w = element.clientWidth;
    var h = element.clientHeight;

Is that 2 reflows or 1?

    var w1 = element1.clientWidth;
    var h1 = element1.clientHeight;
    var w2 = element2.clientWidth;
    var h2 = element2.clientHeight;

Is this 4 reflows, 2, or 1?

---

reading this article (https://developers.google.com/web/fundamentals/performance/r...) it sounds like it's 0 reflows if nothing has changed. In other words it's all cached

View on HN

They cause immediate reflow only if the DOM is dirty. In both cases it'd be a maximum of 1.

This'd be 2:

    element.textContent = 'omg';
    var w = element.clientWidth;
    elem.classList.add('ok');
    var h = element.clientHeight;

And it's especially bad if you interleave them all:

  var heights = lotsOfElements.map(function(el){
    el.classList.add('ok');
    return el.clientHeight;
  });

Better is to batch the DOM updates and reads, where you can:

  lotsOfElements.forEach(function(el){
    el.classList.add('ok');
  });
  var heights = lotsOfElements.map(function(el){
   return el.clientHeight;
  });

If the layout isn't "dirty" from a change, then it doesn't need to reflow.

Reply on news.ycombinator.com