Dynamic Table Rendering Workbench

Use this page to run your own timing tests with the different dynamic table assembly and rendering approaches described in the O'Reilly Network article, Dynamic HTML Tables: Improving Performance by Danny Goodman. The code in this page includes self-timers for deleting an existing <tbody> element of a table (for Approaches #1a through #3) and creating new table body content to replace it (creation and deletion elapsed times are kept separate). Table cell data is created in JavaScript while the page loads.

Be patient after clicking one of the buttons. Depending on the speed of your computer's CPU, the browser you're using, and the particular approach selected, you might experience some tests taking 30-60 seconds to run through the 2500 table cells (and much longer in some Opera 7 tests). There is no progress indicator because its presence would impact the timing results.

Timers:
Test Type:  
Deletion Time (ms): 000
Assembly Time (ms): 000
Rendering Time (ms): 000
Total Assembly+Rendering Time (ms): 000

Delete table rows: Top-to-Bottom Bottom-to-Top

Make Tables (IE5+ Windows only / Netscape 6+ / Mozilla / Safari / Opera):
Use insertRow(), insertCell(), and innerHTML
Use insertRow(), insertCell(), and DOM text nodes
DOM DocumentFragment, createElement(), and innerHTML (IE 6+)
DOM DocumentFragment, createElement(), and DOM text nodes (IE 6+)
Assemble tbody content as string, then assign to innerHTML (no IE/Win)
Remove tr elements from tbody only

Make Tables (IE5+ Windows and Mac / Netscape 6+ / Mozilla / Safari / Opera):
Assemble entire table as string then assign to innerHTML of outer div

Table Region for Approaches #1a through #3

Table Region for Approach #4