Optimized table with fixed size cells?

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

Hi all,

I am trying to write a terminal emulator using Javascript + AJAX and I
need to create an 80x25 table (each cell
contains 1 character) in which I can update the contents of each cell
very efficiently.

The tests I have done up to now seem to indicate that each time I
update the cell contents (using innerHTML), the entire table is
resized and redrawn. This makes my app very slow.

Is there a way (CSS maybe) that I can indicate to the table that the
cells are of fixed size and that any update of cell contents only
requires a redraw of that particular cell?

Thanks a lot,

Patrick LeBoutillier

Re: Optimized table with fixed size cells?

Quoted text here. Click to load it

There's a first time for everything!

Quoted text here. Click to load it

How particular implementations optimize reflow is not accessible. You
could try using innerText or replaceChild instead of innerHTML, but it
might well not make any difference.

Instead of using a table you could just make each character a <span>,
each line a <div> and use a monospace font (if you want columns all the
same width). Then the browser is more likely to reflow only one line at
at a time. I suppose 25 tables with one row each for each line might
also work.

Re: Optimized table with fixed size cells?

Quoted text here. Click to load it

How about 25 divs or 80 spans (untested):
<div class="row">
 <span id="r00c00"></span><span id="r00c01"></span>...
<div class="row">
 <span id="r01c00"></span><span id="r01c01"></span>...

your CSS can set

div.row span {
  width: 1em;

and if you still get re-flow, why not add IDs to the row divs
(id="r00", id="r01"...) and position everything absolute (using ems of
course) or maybe just absolutely positioned rows:

div.row { position: absolute; left: 0; }
#r00 { top:   0em; }
#r01 { top: 1.2em; }
#r02 { top: 2.4em; }


Re: Optimized table with fixed size cells?

Scripsit patl:

Quoted text here. Click to load it

This isn't really an HTML question, and other answers in this thread might
point to better directions, but...

Quoted text here. Click to load it

Yes, in CSS you can set table-layout: fixed for a table, and a browser will
then use the widths calculated for cells in the the first row as column
widths, no matter what the contents of other cells might require. The
primary reason is to speed up rendering. (When a table is very large, it
takes time for a browser to read all rows and analyze the width requirements
of all cells before deciding on the column widths.) It _might_, however,
affect the rendering in your case, too.

Jukka K. Korpela ("Yucca")

Site Timeline