Results 1 to 7 of 7

Thread: Chrome andGrids - Forced Reflow is likely a performance bottleneck (layout thrashing)

  1. #1
    Sencha Premium User
    Join Date
    Jan 2017
    Posts
    15

    Exclamation Chrome andGrids - Forced Reflow is likely a performance bottleneck (layout thrashing)

    We are seeing horrific vertical and horizontal scroll performance in our grids when they have more than 100 items. Our 'buffered' grids have roughly 30 columns and consist of mainly strings and dates and may contain hundreds to thousands of rows.

    When profiling both horizontal and vertical scolling in google chrome, chrome highlights some of ExtJs's core methods and reports "Forced Reflow is likely a performance bottleneck". I was able to override the Date.js files to fix date format performance however forced reflows are punishing us.

    Chrome points to this method, flags it in red and even points to a link as problem causers and provides a link to this website:

    in class Ext.dom.Element:
    getScroll: function() {
    ... some lines here....
    left = dom.scrollLeft; <-- causes chrome to "recalculate style"
    top = dom.scrollTop;
    ... some lines here....
    }

    Has anyone solved this? I've tried the nightlies which introduced new bugs but did not see any noticeable performance improvement. I'm worried that this is not fixable due to how bloated the grid dom is.

    Doing some quick tests we noticed it is MUCH faster in IE then Chrome. We need to continue testing this however....
    Attached Images Attached Images

  2. #2
    Sencha Premium User
    Join Date
    Jan 2017
    Posts
    15

    Default

    I'd like to add that my peers also working on other ExtJS projects see the same exact issue within their projects as well.

  3. #3
    Sencha Premium User
    Join Date
    Mar 2010
    Location
    Atlanta, GA
    Posts
    55

    Default This fiddle shows the problem

    The following fiddle creates a large grid.
    In IE 11 the scrolling left right is smooth but in Chrome it is slow.



  4. #4
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,250
    Answers
    758

    Default

    To clarify, this fiddle is posted against Ext 4. Is this where you're seeing the issue? I'm not seeing the same problem in Chrome in 6.2.1.
    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.

  5. #5
    Sencha Premium User
    Join Date
    Jan 2017
    Posts
    15

    Default

    It does seem to be ok in the fiddle. But in both Roys application and mine we both are seeing the same thrashing. Both of these applications were developed independently. There must be some layout or property that triggers the problem.

  6. #6
    Sencha Premium User alexander.urban's Avatar
    Join Date
    Nov 2013
    Posts
    324
    Answers
    9

    Default

    I have the same issue.

    Is it possible to have a Sencha engineer look into our app and compile a list of possible performance improvements both on our side and in the framework?

  7. #7
    Sencha Premium User alexander.urban's Avatar
    Join Date
    Nov 2013
    Posts
    324
    Answers
    9

    Default

    Also, can a Sencha engineer please look into the Forced Reflows occurring in the admin dashboard sample? (e.g. when expanding/collapsing the menu.)

    http://examples.sencha.com/extjs/6.5...board/#profile

    https://i.imgur.com/nsyZnLt.png

    I know the milliseconds may seem negligible, but in a more complex app, it adds up.

Similar Threads

  1. Replies: 4
    Last Post: 3 Aug 2018, 3:35 AM
  2. Replies: 0
    Last Post: 31 Aug 2011, 5:37 AM
  3. DOM reflow - layout issue with plugin uxvismode
    By stetou in forum Ext 3.x: User Extensions and Plugins
    Replies: 0
    Last Post: 10 Dec 2009, 11:41 AM
  4. Replies: 1
    Last Post: 10 Dec 2009, 11:19 AM

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
  •