Massive Dom Creation

[j.preece]

Hi All,

I'm writing an addressbook app that uses an ajax call to receive a
list of contacts. All was running well until I discovered that the
client has 250+ contacts and the browser hangs (windows gives 'not
responding') for a second as Javascript draws all the divs etc
required for the information.

My googling informs me that .innerHTML is the fastest method of
insertion so I have been using this. I have tried looping through the
addresses running .innerHTML each time but that was v slow and crashed
the browser. Then I tried joining all the contacts up in to one
huuuuuuuge string and this was a little faster but the browser still
hangs noticeably.

The only method that doesnt kill the browser is to use setTimeout to
space the .innerHTML calls out by a few ms and but this has its own
disadvantages - I have no idea what the optimum delay is.

Does anyone have any advice? Would DOM creation be better if I were to
create all the nodes and then insert or will I experience similar
problems?

If nobody replies with advice before I try it myself I will let you
know.

James

 

[Dr J R Stockton]

In comp.lang.javascript message <[email protected]
oglegroups.com>, Tue, 22 May 2007 10:01:24, (e-mail address removed) posted:

Then I tried joining all the contacts up in to one
huuuuuuuge string and this was a little faster but the browser still
hangs noticeably.

Different ways of creating a huge string have different speeds.

S = "" ; for (J=0; J<30000; J++) S += " " + J + "\n"

A = [] ; for (J=0; J<30000; J++) A.push(" " + J + "\n") ; A = A.join("")

I find the second four times faster in IE6 XP sp2.

Something on that would be worth having in the FAQ, except that it's
much more often answered than asked.

It's a good idea to read the newsgroup c.l.j and its FAQ. See below.

 

[RobG]

In comp.lang.javascript message <[email protected]
oglegroups.com>, Tue, 22 May 2007 10:01:24, (e-mail address removed) posted:


Different ways of creating a huge string have different speeds.

S = "" ; for (J=0; J<30000; J++) S += " " + J + "\n"

Yes, the += compound operator is notoriously slow in IE.

There are various strategies for speeding things up, such as cloning
nodes rather than creating them. One method that has had great
success is Duff's device:

<URL: http://homepage.mac.com/rue/JS_Optimization_Techniques/ >

Also remember that less code doesn't necessarily mean more speed -
extreme brevity can make things slower.