> From: David Cramer > > I noticed some slow down today when rendering almost 1000 TD > elements with jQuery. I had originally assumed JavaScript was > just slow but that didn't seem right. After doing some tests, > it seems jQuery takes nearly 10x longer than normal DOM > manipulation to render the 1000 rows. Is there something I'm > doing wrong? > > http://dpaste.com/hold/19433/
Here's a running copy of your test page: http://mg.to/test/jquery12/table-slow-1x1000.html I believe the test cases each create a single row with 1000 columns, is that correct? This version uses [].push, [].join, and $().html() instead of the DOM creation, and with content in each column. It is much faster: http://mg.to/test/jquery12/table-fast-1x1000.html On my machine, that single row test is almost too fast to measure, so here is a version with 10 rows of 1000 columns: http://mg.to/test/jquery12/table-fast-10x1000.html And just for comparison, 1000 rows of 10 columns: http://mg.to/test/jquery12/table-fast-1000x10.html The code in each of those pages looks like this: var nRows = 10, nCols = 1000; // or whatever var rows = []; for( var i = 1; i <= nRows; ++i ) { var cols = []; for( var j = 1; j <= nCols; ++j ) { cols.push( [ '<td>', i, ':', j, '</td>' ].join('') ); } rows.push( [ '<tr>', cols.join(''), '</tr>' ].join('') ); } var html = [ '<table>', '<tbody>', rows.join(''), '</tbody>', '</table>' ].join(''); $('#table').html( html ); If you need event handlers on the elements, assign a single event handler to the table and use event bubbling to catch events for all of the elements at once. See an earlier post of mine for details: http://groups.google.com/group/jquery-en/msg/785b404914c25511 -Mike
