Results 1 to 3 of 3

Thread: Why is resumeLayouts/flushLayouts forcing multiple browser layouts?

  1. #1
    Sencha User
    Join Date
    Jul 2015

    Default Why is resumeLayouts/flushLayouts forcing multiple browser layouts?


    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=
    Ext.define.measureContentWidth @ ext-all.js?productVersion=
    Ext.define.calculateContentSize @ ext-all.js?productVersion=
    Ext.define.calculate @ ext-all.js?productVersion=
    Ext.define.runLayout @ ext-all.js?productVersion=
    Ext.define.runCycle @ ext-all.js?productVersion= @ ext-all.js?productVersion=
    Ext.define.statics.flushLayouts @ ext-all.js?productVersion=
    Ext.define.statics.resumeLayouts @ ext-all.js?productVersion=
    Ext.resumeLayouts @ ext-all.js?productVersion=

    So basically we are calling resumeLayouts when we're done, and resumeLayouts will ultimately call getWidth which will call dom.getBoundingClientRect().
    According to this 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.

  2. #2
    Sencha Premium User suzuki1100nz's Avatar
    Join Date
    Apr 2011
    New Zealand



    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 -

  3. #3
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Sydney, Australia


    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.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

Similar Threads

  1. Replies: 2
    Last Post: 21 Jan 2013, 8:18 AM
  2. How to handle browser resize in gxt layouts?
    By santhi in forum Ext GWT: Discussion
    Replies: 1
    Last Post: 10 Sep 2011, 8:44 AM
  3. Possible to have multiple layouts?
    By nrevelle in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 5 Apr 2010, 5:35 AM
  4. Javascript loading progress bar, forcing browser update, in PHP
    By davidhw in forum Community Discussion
    Replies: 13
    Last Post: 28 Aug 2009, 11:15 PM
  5. [Solved] Multiple column layouts in multiple tabs in FormPanel
    By zzo in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 29 Nov 2007, 10:03 PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts