1. #1
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,114
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default IE9, IE8 are very slow compared to IE7

    IE9, IE8 are very slow compared to IE7


    I have two samples of a part of my application, IE7 compared to IE9. When loading a grid with some records in this case a buffered grid (so only 40 records out of the 350 in the dom), the menu items interact very slowly in IE9 and IE8.

    On mouseover it takes at least one or two seconds to highlight the menuitem.
    When clicking around in the menu it also jams.

    https://www.transpasonline.nl/screencapture/ie7.html
    https://www.transpasonline.nl/screencapture/ie9.html

    These samples are with some heavy components like the google api, but it also occurs with smaller screens. It seems to depend on the number of records wich are loaded in the grid.

    Chrome, firefox and IE7 have a good performance.

    Are there any suggestions to get IE8 and 9 quicker when having some records loaded in the grid?

  2. #2
    Touch Premium Member
    Join Date
    Nov 2010
    Location
    Chicago
    Posts
    1,311
    Vote Rating
    109
    LesJ is a glorious beacon of light LesJ is a glorious beacon of light LesJ is a glorious beacon of light LesJ is a glorious beacon of light LesJ is a glorious beacon of light LesJ is a glorious beacon of light

      0  

    Default


    Do you by any chance use Google Chrome Frame with IE7?

    ...then IE7 would be faster compared to IE8 or IE9.

  3. #3
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,114
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    Nopes... I just switched compatability modes. So IE7 mode is faster without chromeframe.

    Using Chrome Frame isn't an option to use, it requires additional intallations for the client.

  4. #4
    Sencha User
    Join Date
    Feb 2011
    Location
    Moscow, Russia
    Posts
    18
    Vote Rating
    0
    qi_tronic is on a distinguished road

      0  

    Default


    Did you read this?
    http://www.sencha.com/forum/showthre...st-one-machine

    Maybe your IE9 is in software rendering mode.

    Nobody wanted to help me then so I continued with the investigation myself.

    Now I can 100% say that this slowdown is caused by usage of CSS3BorderRadius in IE9.
    It is used for panel frames, buttons, tab labels and everywhere where corners of a rectangle are rounded.
    In older browsers there were special arrangements of many DIVs or a small TABLE around a rectange.

    In fact Border Radius always slowdowns IE9 but in GPU rendering mode it is just a little bit slower.
    In software rendering mode it is unacceptably slow - "seconds to react".

    The bigger the rectangle the slower it is.
    So panel frames have the biggest impact.

    Try this patch as a proof of concept in at the very beginning of onReady()
    Code:
        var body = Ext.getBody();
        if (Ext.isIE9) {
            // panel and toolbar ok (except in if in 'footer ui' mode)
            Ext.supports.CSS3BorderRadius = false;
            body.addCls('x-nbr');
            
            //body.removeCls('x-ie9');             // uncomment for panel header be correct
            //body.removeCls('x-ie9p');
            //Ext.getBody().addCls('x-ie8');       // uncomment for tooltips be correct
            //Ext.getBody().addCls('x-ie8m');
            //Ext.getBody().addCls('x-ie78');
        }
    This patch does not solve all the problems as some elements still may be rendered without frames.
    x-nbr class also causes checkboxes and radios be rendered incorrectly by IE9.

    We need help from Sencha to stop using Border Radius in IE9 completely.

    An alternative solution would be to stop using panel frames wherever possible.

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,501
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Try this at the beginning of your onReady function:

    Code:
            Ext.supports.CSS3BorderRadius = false;
            Ext.getBody().addCls('x-nbr x-nlg');

  6. #6
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,585
    Vote Rating
    322
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    The CSS border-radius theory sounds plausible for IE9 but it doesn't really fit for IE8.

    @qi_tronic. It'd be good to isolate the effect of CSS border-radius. Open up the CSS file and do a find/replace on border-radius. Just rename it to some nonsense value that won't be interpreted by the browser. Obviously you'll lose the rounded corners but I'd be interested to hear how it affects the performance of your app in IE9.

  7. #7
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,114
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    I did read your thread. My browser is in gpu mode. But it is slow on both settings, the speed of focus on the menu items for example decreases if there is data loaded in the grid. The more data the slower it gets.

    So the performance is somehow also related to the view of the grid.....I really hope your theory will fit this case.

    I will try these settings, first thing when I am back on work, but I celebrate some weekend first.

    Thank you a lot.

  8. #8
    Sencha Premium Member
    Join Date
    Mar 2012
    Location
    New Zealand
    Posts
    109
    Vote Rating
    15
    wayne.rudd will become famous soon enough

      0  

    Default


    Thanks for those that have done the investigation on this - in my situation the radius CSS is definitely cause the performance problem in IE9

    I have actually ripped every line out the of the CSS (is use ext-all-gray.css) that contains 'radius' (850 odd lines) and it solves the problem for me, and I actually prefer the non-curved look to my borders on buttons and frames :-)

    Just have to figure how to stop the reversion to image based curves for non-radius capable browsers (like IE7 which ironically is why IE7 performs OK)

  9. #9
    Sencha User
    Join Date
    Feb 2011
    Location
    Moscow, Russia
    Posts
    18
    Vote Rating
    0
    qi_tronic is on a distinguished road

      0  

    Default


    skirtle,

    It looks like wayne.rudd have done this experiment already

  10. #10
    Sencha Premium Member
    Join Date
    Mar 2012
    Location
    New Zealand
    Posts
    109
    Vote Rating
    15
    wayne.rudd will become famous soon enough

      0  

    Default


    After a bit more investigation it seems there is an issue is in IE9 with curved bordered divs that contain a large number of children (which in a Sencha app there are a lot of children when when have a complex grid loaded...)

    simple fix for me was this in my custom css (you lose curves of the framed panels however)

    .x-panel-default-framed {

    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    }

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi