Forums Retired Products and Controls
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Athar
25
UltraWebGrid performance is degraded on IE compared to firefox
posted

IE 6 is our corporate standard and everyone is required to use IE. We have discovered in one of our recent applications that performance is significantly degraded while manipulating/validating grid data on client side (using javascript). For instance, it takes more than 20 seconds to select a checkbox by looping through 120 rows of data. I am wondering is this is an IE DOM defeciency or is it something that can be improved in the grid (or perhaps in the script).

We have tested the this page in FireFox and the same code goes through the whole grid in less than 2 seconds (data modification)  and less than one second for validation. Even though this response is slow but is acceptable to the users.

Could you please suggest a solution for the above?

Thanks

Parents
No Data
Reply
  • 19308
    posted

    There are some key areas in IE where scripting/DOM manipulation is less then stellar.  Here are a couple of things to watch out for.

    String manipulation is very slow.  Appending 1000 characters together is orders of magnitude slower than inserting 1000 characters into an array and performing a join on the array.  Because of this, many script libraries (including Microsoft's AJAX Extensions) have a StringBuilder class that can be used.

    Accessing objects in the DOM can be slow, and objects references aren't cached.  This means if you have a line like foo.bar.childElements[0].firstChild, the entire chain must be processed each time.  Add 4 of these lines in a row and you end up with very slow code.  Avoid this scenario by caching references yourself. 

    As an example turn

    a.b.c.childElements[0].firstChild.style.backgroundColor=red;
    a.b.c.childElements[0].firstChild.style.fontFamily="verdana";

    INTO

    var style=a.b.c.childElements[0].firstChild.style;
    style.backgroundColor=red;
    style.fontFamily="verdana";

    Also, IE's InnerHTML method can be extremely slow.  Because of this avoid scenarios where you're constantly appending to the InnerHTML string.

    As an example, turn

    element.innerHTML+="<div>hello</div>";
    element.innerHTML+="<div>world</div>";

    INTO

    var content="<div>hello</div>";
    content+="<div>world</div>";
    element.innerHTML=content;

    To make that even more efficient, use the string builder to build your content rather than string concats. 

    Also, be aware that the WebGrid uses a lazy create pattern on the client-side for all objects.  A grid oRow object isn't created until it is requested.  This may be the result of a user performing selection, or your code calling "getRow(i)".  It sounds like you'll need to loop through each row so you can't avoid it, but it's good to be aware of it either way.  I've also seen some minimal results changing a for loop from increasing to decreasing or making it a while loop.  These optimizations really get down to the dirty details of the browsers's javascript implementation which means you're looking at a minimal gain - but still something that you may want to look at. 

    If you can't get the script running faster, post your code for the checkbox selection here and I'll give it a while on my end.  We may even find some room for optimization on the grid side of things.

     

Children