|

welcome to my space
RSS Feed

Element update, performance, etc.

Monday Mar 15, 2010
  • So, Element.update strips scripts and executes them upon the available of a dummy element instead of letting them execute upon html insertion. A similar approach is followed by Prototype but using a delay.

    The problem is, when you have pages that have Ext components (combos, grid, etc.) that need script processing to "fix up", you get different display behavior when using Ajax when compared to normal page load.

    For example, I have a page that has a grid. With a normal full page get, the page loads quite quickly and all at once. When loaded via Ext.get().load, there is a noticeable delay between showing the surrounding HTML of the Ajax request and the grid appearing. This is apparently is a result of how Element.udpate works as outlined above. This delay is much more pronounced when the content is loaded in the content area of a complex border layout as the Grid rendering now takes 3-5 times longer due to updateRule performance. Further, the load completion callback is pre-mature, at the time of html insertion, not after script execution. In my case, the loading mask is removed before the grid is even displayed.

    Yes, I can work around some of these problems...

    My question, however, is why not let the scripts run upon insert? When is the update approach currently used by Element.update (and in Prototype) necessary? Is this a cross browser issue? Would it make sense to have an alternative, direct execution Renderer to use when appropriate?


  • Jack, do see anything fundamentally wrong with the insertion approach used here?


  • So insertHtml evals inline scripts AND loads scripts with a src set? This couldbe quite a find! Do you test Safari and Opera?


  • The reason is that an innerHTML update is not always a synchronous action. For this reason, a timeout is required.


  • I actually did above. See my post from 5/5/07. To apply this renderer to a particular element, use:

    Ext.get('my-div').updateManager.renderer = new MyInsertRenderer();

    Now, when ajax content is loaded into the element via something like the following, this new renderer will be used.

    Ext.get('my-div').load({ url: url, scripts:true});


  • Which part, the insertHtml approach instead of innerHTML?

    el.select('> >').remove(); is going to be slow if the body is large.


  • I have only tested on FF 2.x and ie 7 with inline scripts. Note, you must have the 'defer' option specified for inline scripts to work in ie 7: