PDA

View Full Version : Why is resumeLayouts/flushLayouts forcing multiple browser layouts?



dannylib
9 Sep 2015, 1:24 PM
Hi,

I'm working on optimizing our application performance and I've noticed that even though we do all our layouts in between suspendLayouts and resumeLayouts calls, there is still quite a lot of browser layouts happening. This manifests itself in the Chrome Timeline feature, showing multiple "forced" layout operations all with the same stack and the same layout root. The stack is as follows:



Element.override.getWidth
@
ext-all.js?productVersion=7.2.1.0.0.4779:19301


Ext.define.measureContentWidth
@
ext-all.js?productVersion=7.2.1.0.0.4779:37233


Ext.define.calculateContentSize
@
ext-all.js?productVersion=7.2.1.0.0.4779:36933


Ext.define.calculate
@
ext-all.js?productVersion=7.2.1.0.0.4779:36895


Ext.define.runLayout
@
ext-all.js?productVersion=7.2.1.0.0.4779:125820


Ext.define.runCycle
@
ext-all.js?productVersion=7.2.1.0.0.4779:125792


Ext.define.run
@
ext-all.js?productVersion=7.2.1.0.0.4779:125727


Ext.define.statics.flushLayouts
@
ext-all.js?productVersion=7.2.1.0.0.4779:29913


Ext.define.statics.resumeLayouts
@
ext-all.js?productVersion=7.2.1.0.0.4779:29921


Ext.resumeLayouts
@
ext-all.js?productVersion=7.2.1.0.0.4779:32423



So basically we are calling resumeLayouts when we're done, and resumeLayouts will ultimately call getWidth which will call dom.getBoundingClientRect().
According to this (http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html) article, that will trigger a layout in Webkit, which is expensive. My question is if there is any way to avoid this. What I would expect is that I can make as many layout changes as I want and then when I call resumeLayouts the browser only has to figure out the layout once.

suzuki1100nz
10 Sep 2015, 12:11 AM
Hi,

If you didn't suspend layouts you would get layout runs as you add components and show them.
resumeLayouts flushes and executes all the scheduled layout runs at the end and depending on your component hierarchy and container layouts can result in multiple layout operations.

So what will help to show the performance problem is your code - i.e. what your showing, the component structure and how your showing it.

Usually rendering performance issues are caused by:

- Excessive components and component nesting
- Lack of lazy rendering with tabs
- Shrink wrapping containers (Panels) components etc...

Good blog post here - https://www.sencha.com/blog/inside-the-ext-js-4-1-layout-system/

evant
16 Sep 2015, 2:33 AM
Don't confuse browser layouts with Ext layouts. When we say suspendLayouts, we mean don't run the Ext layout system to calculate how the components should be laid out. Browser layouts are a different thing.

The layout system runs in read/write phases to minimize DOM layouts, if you're feeling a little adventurous there's a tome in layout/Context.js that explains a lot of how it works.