I’m working on making layouts more efficient. Currently, there’s lots of
setting and reading of width and height which causes many browser reflows.
While profiling performance in my app, reflows is a major bottleneck. In one
area, it’s taking about 150ms (on my I7 2.8 Ghz MacBook Pro — on tablets it’s
painfully slow) to execute on area of layout. Almost all of that time is being
spent measuring with and height of components. The width and height getters
trigger reflow because properties are recursively set in layout.
I was able to get about a 10% improvement by optimizing the width and height
getters to return the explicitWdith and explicitHeight if set. It looks to me
like almost all of this bottleneck could be eliminated by delaying the property
setting until after the measurements are done. I’m working on doing that, but I
have a question:
LayoutBase.performLayout has the following code:
// check sizes to see if layout changed
the size or not
// and send an event to re-layout
parent of host
if (host.width != oldWidth ||
host.height != oldHeight)
{
isLayoutRunning = true;
host.dispatchEvent(new
Event("sizeChanged"));
isLayoutRunning = false;
}
Under what circumstances does this code get executed? This appears to be
causing a recursive layout. Can I assume that there will be an
explicitWidth/height when this will be executed?
