[whatwg] Reliably Minimize Reflows

Ian Hickson ian at hixie.ch
Mon Oct 5 19:45:52 PDT 2009


On Sat, 26 Sep 2009, Joseph Pecoraro wrote:
>
> A task that developers are often faced with is applying many style 
> updates to multiple Nodes in the DOM.  An example would be 
> showing/hiding all divs with the "foo" style class:
> 
>   // Hide multiple divs
>   var foos = document.getElementsByClassName('foo');
>   for (var i=0, len=foos.length; i < len; ++i)
>     foos[i].style.display = 'none';
> 
> As I understand it, if there are 20 .foo elements then updating the style on
> each _could_ cause 20 individual reflows.

No, restyling only happens once per event loop cycle, and running a 
script takes one event loop cycle. (Unless you force a sync layout by 
trying to determine the layout metrics, but nothing does that in the 
example above.)


On Sun, 27 Sep 2009, Boris Zbarsky wrote:
> 
> I would be more interested (from an implementor point of view) in a 
> block that said "inside this block, no need to do layout even if I ask 
> for layout information".  That would provide me with information I don't 
> actually have and allow me to optimize better.  However, I think it 
> would be very difficult to use for authors, because it would be too 
> error-prone...

Sounds like something for CSSOM, if we add it to the platform at all.

-- 
Ian Hickson               U+1047E                )\._.,--....,'``.    fL
http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'


More information about the whatwg mailing list