javascriptperformancedomreflow

Avoiding HTML document reflows

I have several hundred "row" elements like this:

<div class='row'>
  <div class='cell'></div>
  <div class='cell'></div>
  <div class='cell'></div>
</div>

I need to get their clientHeight after they have been rendered on the page already. I know that the "clientHeight" property forces a reflow and this kills my performance since there are so many of them. However - they are already rendered and I know that their size doesn't change between the time they are rendered and the time that I query for their height.

Is there a way to tell the browser to NOT reflow when querying for the height ? Moreover - the webkit inspector says:

Layout tree size  5901
Layout scope      Whole document

And the divs are within an absolutely positioned ancestor - shouldn't only the absolutely positioned element be reflowed?

Edit:

So the answers provided are correct. I was in fact dirtying the layout because I had this loop:

rows.each(function(){
  $(this).css('height', this.clientHeight);
});

Changing the code to this fixed the problem:

var heights = rows.map(function(){
  return this.clientHeight;
});
rows.each(function(){
  $(this).css('height', heights.shift());
});
Solution

  • The clientHeight property doesn't force a reflow, at least not by itself. You need two things to trigger a reflow:

    1. dirty the current layout (set a layout property like width or height)
    2. query a layout property (clientHeight for example)

    You can easily batch calls to set the width or height and no reflow will happen until the JS context relinquishes control. You can easily batch queries for layout properties and no reflow will happen if the current layout is not dirty.

    The problem appears when you do 1 and 2 in succession. The reflow is forced in order to satisfy your query with accurate information.

    To my knowledge you are correct that having an absolutely positioned ancestor should limit the reflow from "spreading" all over the document (the parent of the absolutely positioned ancestor will not reflow). All the items inside the absolutely positioned ancestor will still reflow!

    As for a solution to your problem yes there is. Set a caching mechanism, like this (pseudocode):

    forEachDiv(function(div) {
  div.getClientHeight = function(){
    return div.cachedClientHeight = div.cachedClientHeight || div.clientHeight;
  }
});

    You can then use div.getClientHeight() instead of div.clientHeight as many times as you want and only the first usage will trigger a reflow (if dirty).

    Obviously, keeping in line with the first suggestion, you can also artificially query the clientHeight for all the divs in one batch ( = one reflow) and you have no more problems afterwards.

    // cache the client height for all divs now, to avoid reflows later
forEachDiv(function(div) {
  div.getClientHeight(); 
});