3

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?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
RubyDubee
  • 2,426
  • 2
  • 23
  • 34

4 Answers4

5

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
  • 5,832
  • 2
  • 26
  • 32
  • But why there is a difference in speed between FF and Chrome? i would not have given a damn if both were slow – RubyDubee Jan 04 '10 at 08:34
  • 5
    the difference is because both browsers use different rendering engines. This is also the reason why a Corolla is slower than a Ferrari. – jrharshath Jan 04 '10 at 08:36
  • 1
    @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 Jan 04 '10 at 09:07
  • I would think you would want to use table layout fixed and set the column widths. That should speed it up because otherwise it will be constantly trying to recalculate the column widths – dfmiller Sep 18 '18 at 16:11
1

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
  • 14,025
  • 1
  • 28
  • 24
-1

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:

Community
  • 1
  • 1
Eran Medan
  • 44,555
  • 61
  • 184
  • 276
-1

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.

Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
Jeepstone
  • 2,591
  • 5
  • 22
  • 38
  • Yeah, sorry. not – Jeepstone Jan 08 '10 at 15:55
  • 1
    I don't think this changes the speed of rendering either. Could you substantiate this claim? – Evan Carroll Apr 05 '10 at 20:46
  • 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 Apr 06 '10 at 09:00
  • `` and `` don’t themselves tell the browser how big your table is. – Paul D. Waite Oct 25 '10 at 14:38
  • Adding those tags does nothing for speed. – dfmiller Sep 18 '18 at 16:07
  • Benefits of a fixed layout algorithm The aesthetic benefits of using table-layout: fixed should be clear from the demonstrations above. But the other major benefit is performance. The spec refers to the fixed algorithm as a "fast" algorithm, and for good reason. The browser does not need to analyze the entire table's content before determining the size of the columns; it only needs to analyze the first row. So the result is a faster processing of the table's layout. Taken from https://css-tricks.com/almanac/properties/t/table-layout/#article-header-id-2 – Jeepstone Oct 03 '18 at 12:54