Optimized table with fixed size cells?

[patl]

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

[Ben C]

On 2007-02-04, patl <pa************ ******@gmail.co mwrote:

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)

There's a first time for everything!

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?

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 <divand 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.

[Ben Bacarisse]

"patl" <pa************ ******@gmail.co mwrites:

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?

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

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; }
....
--
Ben.

[Jukka K. Korpela]

Scripsit patl:

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.

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

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?

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")
http://www.cs.tut.fi/~jkorpela/