mea culpa
I made a 'mistake': I put in the loop an accessor $( ".class" ) that caused
the abnormal delay.
After saving the reference $class = $( ".class" ) before entering the loop,
the delay has lowered to 78 milliseconds in IE7 AND 78 milliseconds in
FF1.5.0.8: unbelievable!
you can save references to your objects, making it very fast to get to those
objects later
Thanks Michael, "save references" was the key!
It's only a pity that I had to dig in jQuery (Firebug) to find it out (I saw
your post just before posting this "mea culpa")
BTW:
while digging I saw that the same jquery object gets through some code
patterns many times, or at least it's what that looked to me. Also I was
surprised seeing that array copying is done as "b = merge( a, [] )" in place
of "b = a.concat();": shouldn't the latter be faster?
Michael Geary wrote:
>
>> From: Andrea Ercolino
>>
>> I have got an array of 50 urls templates, and want to make a
>> proper url out of each one, adding also a special click, and
>> then append all these urls to a div in a specific position.
>> All this should be done many times in a page, "many" could be
>> 50, just to say something that could be possible, but it's
>> really an unpredictable number of times. (well, less than a
>> 100 is a good guess)
>>
>> I think the problem lies in the dom creation.
>> Each link is inside 4 nested divs, so this could mean 80
>> bytes each (adding structure and data).
>> At only 3 divs ( x 50 = 150 appends ) I'm experimenting a
>> delay of a couple of seconds for reloading the page, and for
>> this test the page has no content other than those divs!
>
> Yeah, all that DOM creation will take a while - especially if you use a
> convenience plugin like mine.
>
> I get much better performance across browsers with [].join('') and
> innerHTML.
>
> Here's a design pattern I use all the time. I threw in some arbitrary divs
> and spans to show how the nesting works out.
>
> // Return HTML rendering for an array of strings
> function renderAll( array ) {
> var inner = [];
> for( var i = 0, len = array.length; i < len; i++ ) {
> inner[inner.length] = renderOne( array[i], i );
> }
>
> return [
> '<div id="wrap1">',
> '<div id="wrap2">',
> inner.join(''),
> '</div>',
> '</div>'
> ].join('');
> }
>
> // Return HTML rendering for a string item
> function renderOne( item, i ) {
> return [
> '<div id="myitem', i, '">',
> '<span class="myitem">',
> item,
> '<span>',
> '</div>'
> ].join('');
> }
>
> A test call could be:
>
> $('#testdiv').html( renderAll( [ 'one', 'two', 'three' ] ) );
>
> This same basic pattern works for tables, or anything where you have
> nested
> and repeated elements. It works in just about any browser - even very old
> ones, thanks to the use of inner[inner.length] instead of inner.push().
> And
> it's very fast - much faster than the same DOM operations.
>
> Obviously you could replace the [].join('') with ordinary string
> concatenation, but the array join is faster on most browsers.
>
> The one big drawback is that you don't automatically get references to the
> objects you're creating. With DOM creation, you can save references to
> your
> objects, making it very fast to get to those objects later. To make up for
> this, you can assign unique IDs in the HTML code as the example does.
>
> Obviously you could extend this all sorts of ways. In my actual code, the
> "item" is usually an object and not a string, and the renderOne function
> builds up HTML from that object's properties.
>
> -Mike
>
>
> _______________________________________________
> jQuery mailing list
> [email protected]
> http://jquery.com/discuss/
>
>
--
View this message in context:
http://www.nabble.com/How-do-I-add-a-js-array-of-jquery-objects-to-a-jquery-object--tf2614381.html#a7310880
Sent from the JQuery mailing list archive at Nabble.com.
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
