DHTML Cells In Large Table... Takes FOREVER!

[Chris]

Can anyone help me on this one?

I have a giant (couple thousand rows) HTML table.

Im trying to modify some of the cells innerHTML and/or innerText, but
it is taking a VERY long time to do so.

I believe that the problem is not with executing the code, but rather
with the browser reparsing the page, or the table, or something.

Basically, if I get a reference to a TD element in a variable called
MyCell, then I have this code.

alert("about the update cell");
MyCell.innerHTM L = "hello";
alert("finished ");

When I do this, I hear the "Bing" from the 2nd alert box very fast,
almost right away when I click OK to the "about to update cell" alert
box, but the actual alert box saying "finished" doesn't show up for
another 5 seconds or so. During these 5 seconds, my browser is
locked, and the change I made in javascript does not show.

I tried using: style="TABLE-LAYOUT:fixed;" in my table, this helped
load the table faster (it will start showing rows before it has
finished loading the whole table), but it did nothing for my DHTML
times...


Can some guru out there help me with this one? Is there anything else
I can do here to help with this problem?

[DU]

Re: DHTML Cells In Large Table... Takes FOREVER!

Steve van Dongen wrote:
[color=blue]
> On 23 Jul 2003 21:00:32 -0700, cmay@walshgroup .com (Chris) wrote:
>
>[color=green]
>>Can anyone help me on this one?
>>
>>I have a giant (couple thousand rows) HTML table.
>>
>>Im trying to modify some of the cells innerHTML and/or innerText, but
>>it is taking a VERY long time to do so.
>>
>>I believe that the problem is not with executing the code, but rather
>>with the browser reparsing the page, or the table, or something.
>>
>>Basically, if I get a reference to a TD element in a variable called
>>MyCell, then I have this code.
>>
>>alert("abou t the update cell");
>>MyCell.innerH TML = "hello";
>>alert("finish ed");
>>
>>When I do this, I hear the "Bing" from the 2nd alert box very fast,
>>almost right away when I click OK to the "about to update cell" alert
>>box, but the actual alert box saying "finished" doesn't show up for
>>another 5 seconds or so. During these 5 seconds, my browser is
>>locked, and the change I made in javascript does not show.
>>
>>I tried using: style="TABLE-LAYOUT:fixed;" in my table, this helped
>>load the table faster (it will start showing rows before it has
>>finished loading the whole table), but it did nothing for my DHTML
>>times...
>>
>>Can some guru out there help me with this one? Is there anything else
>>I can do here to help with this problem?[/color]
>
>
> If all you are doing is changing simple text, use innerText instead of
> innerHTML.
>
> Regards,
> Steve[/color]

I made an interactive demo page exactly about this issue. Performance
gain of 300% to 2000% depending on browsers, cpu, RAM.

innerHTML versus nodeValue performance comparison:

http://www10.brinkster.com/doctorunclear/HTMLJavascriptCSS/innerHTMLvsNodeValue.html

"By now, almost everyone knows that using element.innerHT ML is slow,
slow, slow. To see just how slow it was, I made a final test page that
used innerHTML instead of innerText to insert "Text" into the cell. This
literally crushed performance. Total time went to 3375 m/s, more than 80
percent worse than the previous test. This one change brought the total
baseline comparison to -45 percent. Clearly, innerHTML is pretty expensive."

http://msdn.microsoft.com/library/de...ude100499.asp?
frame=true&hide toc=true

http://msdn.microsoft.com/library/en...dude100499.asp

nodeValue is W3C web standards compliant while innerText is not.

DU
--
Javascript and Browser bugs:

http://www10.brinkster.com/doctorunclear/