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

Question

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?

Answer 1

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'.

Answer 2

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});