Topic: Javascript InnerHTML Table performance

Well,

Im assuming this is 'normal' but i just want to make sure.

I am using javascript to call my php script which generates a table and sends it back to javascript, at which point i use the innerHTML method to insert it into a DIV.

It seems to be getting increasingly slow however, even if its only 10 rows its noticably slow, if its 20 rows it twice as slow etc etc.


Is this normal for even as few as 10 rows? I was considering using DOM but ive heard thats actually slower than innerHTML.


It seems if i have a large table that its actually quicker to refresh the whole page than dynamically update the table. Does this seem right?

Okay turns out its not normal thank for that!


The problem is with my json parser because its performing a security regex before it does an eval(). Being a large body of text it took some time... so im going to move that parsing to php

quote:

---

H][RO said:

Well, Im assuming this is 'normal' but i just want to make sure. I am using javascript to call my php script which generates a table and sends it back to javascript, at which point i use the innerHTML method to insert it into a DIV.It seems to be getting increasingly slow however, even if its only 10 rows its noticably slow, if its 20 rows it twice as slow etc etc.Is this normal for even as few as 10 rows? I was considering using DOM but ive heard thats actually slower than innerHTML. It seems if i have a large table that its actually quicker to refresh the whole page than dynamically update the table. Does this seem right?

---

Usualy DOM is significaly faster. But in some cases it is faster to generate table into string and then write whole table as a one string into some element's innerHTML.
Are you sure that bottleneck is a table building?

---------------------------------------------------------------------------------------------------------------
var pleaseVisit=window.open("http://trickyscripter.com","mySite","")

in my experience creating BIG tables ( like thousands of cells ) is MUCH faster when you build the markup in a string ( by adding the string to itself as much as you can ) and injecting it in the innerHTML of an element.

H][RO: Have benchmarked various parts of you script as DizzZ suggested ? i.e. parsing the string, doing the eval(sic), injecting it in the DOM, which of these operation takes most of the time, on which browser ? if you only return values ( no markup ) you can get rid of JSON and return a multiline string which is a piece of cake to transform into a table.

... or you could send/create the whole table in several chunks.



(Edited by poi on 09-11-2006 19:49)