Saturday, February 19, 2011

Can I speed up the YUI layout manager, when I have a large table on the page?

I am using the YUI layout manager which seems to work at an OK speed. However if the page contains a large <Table> with about 500 rows, the YUI render() function takes about a minute longer to run.

When I open the same page without the layout manager it opens in less than a second.

My only concern is with IE 7. I tried it on firefox and it only took about three seconds.

Any ideas on what is taking so long? Can I somehow tell the layout manager to ignore the table?

From stackoverflow
  • I finally figured it out myself.

    The trick is to hide the content that should be ignored by the layout manager.

    Before calling render() set the style.display = 'none' for a tag that contains a large chunk of the page you don't need the layout manager to manage. Set it back to normal after with style.display = 'block'.

  • Do you mean the render() method of your large table is taking a long time?

    the YUI DataTable has a renderLoopSize property specifically for this kind of situation. It makes the table render to the DOM every X rows, rather than waiting till the end and rendering them all in 1 go.

    var myDataTable = new YAHOO.widget.DataTable("myContainer", 
                             myColumnDefs, 
                             myDataSource, 
                            {renderLoopSize: 100});
    

0 comments:

Post a Comment