I am rendering a small table(maybe 10-12 cells) which is updated constantly. I want it to be quick. Chrome does the work very fast, but i am having problems on Firefox/IE. Any suggestions for faster rendering? Thanks
+5
A:
Render the full table at once (create the full HTML for the table and insert it into the DOM, don't insert cells/rows while looping through the data). Also, generating tags for the columns should help (even more if you specify the width for each column).
salgiza
2010-01-04 08:11:22
But why there is a difference in speed between FF and Chrome?i would not have given a damn if both were slow
Webbisshh
2010-01-04 08:34:00
the difference is because both browsers use different rendering engines. This is also the reason why a Corolla is slower than a Ferrari.
Here Be Wolves
2010-01-04 08:36:47
@Pradyumna. As Harshath.jr mentions, some engines are faster than others. As a general rule, however, if you are going to modify the DOM of the page, its always better to make as few changes as possible (that is, create the tags/html first, and then insert all the changes in just one line). If you insert, for example, new TDs one at a time into the DOM, the browser might try to relayout the whole page each time, while inserting the whole table at once should cause just one relayout.
salgiza
2010-01-04 09:07:14
+1 - Thanks that was very useful
Webbisshh
2010-01-05 10:32:24
A:
Interesting acticle that I think can be quite relevant (though a bit indirectly) to the question: http://www.hotdesign.com/seybold/
I got it from an answer to my own question:
Ehrann Mehdan
2010-01-04 08:13:50
A:
One way to improve rendering is to use the thead/tfooter tags. These need to occur before your tbody tag which contains the main content of your table.
<table>
<thead></thead>
<tfoot></tfoot>
<tbody></tbody>
</table>
This way, the browser knows how big your table is before it renders it, which should spped up loading.
Jeepstone
2010-01-04 11:38:10
I don't think this changes the speed of rendering either. Could you substantiate this claim?
Evan Carroll
2010-04-05 20:46:44
I couldn't validate that Evan but by rendering both the thead and tfoot, it allows the browser to place it on the page, and then fill it - also useful for paging etc.
Jeepstone
2010-04-06 09:00:49
`<thead>` and `<tfoot>` don’t themselves tell the browser how big your table is.
Paul D. Waite
2010-10-25 14:38:19
+1
A:
You can check what really happened on the page with help of Timeline panel of Chrome or Safari Dev-Tools (Ctrl-Shift-I for Windows or Cmd-Alt-I for Mac). That information may give you a tip for page scripts optimization. Usually the same set of events will happen in any browser. As example if your javascript dynamically insert DOM nodes then you will see multiple Layout/Paint events.
You will get more Timeline info with the dev-channel version of Chrome but it might be unstable a bit.
Unfortunately I didn't find such instrument in FireBug if you know something like that for Firefox please let me know.
loislo
2010-04-12 17:35:36
[The Net panel in Firebug](http://getfirebug.com/network) performs a similar function.
Paul D. Waite
2010-10-25 14:37:08