document.write and DOm creation - performance optimization?

[jquertil]

I searched the group for this and came across my own old post (http://
groups.google.com/group/jquery-en/msg/18d7fa95c5f01d2d)

I've noticed that when displaying a large number of elements into a
page, it takes a bit of time to render.

but in order to use document.write, I would have to write to an
iframe, and I don't want to do that.

is there a particuarly efficient way to populate a page with results
in jquery? I can't afford a 2.5 second lag.

any ideas much appreciated.

[Michael Geary-3]

Your original post doesn't mention what your code looks like. Were you
calling .append() on each row individually?

Instead, build up a single string and call .html() once to load the string
into a container element. That should be just about as fast as
document.write, if you build the string efficiently.

If that doesn't do it, post a link to a test page.

-Mike

> From: jquertil
>
> I searched the group for this and came across my own old post (http://
> groups.google.com/group/jquery-en/msg/18d7fa95c5f01d2d)
>
> I've noticed that when displaying a large number of elements
> into a page, it takes a bit of time to render.
>
> but in order to use document.write, I would have to write to
> an iframe, and I don't want to do that.
>
> is there a particuarly efficient way to populate a page with
> results in jquery? I can't afford a 2.5 second lag.
>
> any ideas much appreciated.

[jquertil]

posting all code would be crazy but here is relevant snippets.
First the loop I use to iterate ofer an array and write some stuff
into a bunch of DIV elements.
I then want that tho show up someplace on my page. iframe and
document.write displays 500 items basically instantly.
the html() to div element takes about 4 seconds or so in IE7.

    for ( var k = 0; k < v_foundarray.length; k++ ) {
         strHTML += '<div>'+v_foundarray[k] + '</div>';
    }
//window.ifrm.document.open();
//window.ifrm.document.write(strHTML);
//window.ifrm.document.close();

$('div.displayer').html(strHTML);

[Michael Geary-3]

Try wrapping strHTML in one single wrapper DIV before you insert it into the
DOM. I'll bet it will go a lot faster:

    $('div.displayer').html( '<div>' + strHTML + '</div>' );

How's the timing on the for loop? Any browsers where it takes any
significant time? You may speed it up in some browsers by using an array
instead:

    var n = v_foundarray.length;
    var html = new Array( n );
    for ( var k = 0;  k < n;  k++ ) {
        html[k] = '<div>' + v_foundarray[k] + '</div>';

    $('div.displayer').html( '<div>' + html.join('') + '</div>' );

One last thing... Is $('div.displayer') itself taking any significant time?
If it is, you could cache it once, or use an ID instead of a classname.

-Mike

> posting all code would be crazy but here is relevant snippets.
> First the loop I use to iterate ofer an array and write some
> stuff into a bunch of DIV elements.
> I then want that tho show up someplace on my page. iframe and
> document.write displays 500 items basically instantly.
> the html() to div element takes about 4 seconds or so in IE7.
>
>     for ( var k = 0; k < v_foundarray.length; k++ ) {
>          strHTML += '<div>' + v_foundarray[k] + '</div>';
>     }
> //window.ifrm.document.open();
> //window.ifrm.document.write(strHTML);
> //window.ifrm.document.close();
>
> $('div.displayer').html(strHTML);
>

[jquertil]

huh. this is an interesting thought. why would the use of join() speed
things up versus just appending a string variable?
the reason I'm not concerned about the for() loop is that it seems to
be quite fast when I output the strHTML in a document.write.

I'm trying to figure out wasy to speed up the rendering by doing
something other than html()... but I can't think of anything.

[Michael Geary-3]

Did you try the wrapper DIV that I suggested? Did it help or not?

    $('div.displayer').html( '<div>' + strHTML + '</div>' );

-Mike

> huh. this is an interesting thought. why would the use of
> join() speed things up versus just appending a string variable?
> the reason I'm not concerned about the for() loop is that it
> seems to be quite fast when I output the strHTML in a document.write.
>
> I'm trying to figure out wasy to speed up the rendering by
> doing something other than html()... but I can't think of anything.

[Gordon-35]

I could be wrong about this, but my understanding is that strings are
immutable in JavaScript.  Every time you append to a string what's
actually happening is that a new string object is being created with
its contents set to be the first string plus the second string,
whereas the original string is set aside for garbage collection.

Arrays are not immutable, so you can add elements to them without the
overhead of object creation.

If you have FireFox and FireBug available, try profiling the two loops
below to see the difference:

var str = '';

for (x=0; x<10000; x++)
{
    str = str + 'test ';
}

var arr = [];

for (x=0; x<10000; x++)
{
    arr.push ('test ');
}
str = arr.join ('');


On Jul 17, 12:45 am, jquertil <til...@...> wrote:
> huh. this is an interesting thought. why would the use of join() speed
> things up versus just appending a string variable?
> the reason I'm not concerned about the for() loop is that it seems to
> be quite fast when I output the strHTML in a document.write.
>
> I'm trying to figure out wasy to speed up the rendering by doing
> something other than html()... but I can't think of anything.