Firefox Jquery appendTo inefficiency?

Question

I'm working on a portfolio redesign and I have a bit of JS that generates a large number (around 300) of divs, styles them, and appends them to body. This works quickly and perfectly in webkit browsers, but when it comes to Firefox it's slow as hell.

I've been trying to figure out why Firefox can't handle this, and I tried concatenating all the divs' html as strings and then appending the whole thing to body, but this proved to be just as slow or slower.

If you'd like to see the problem live, my site is here

Here's the relevant bits of code:

get_bokeh returns a string of CSS styles describing a single "bokeh" piece.

function generate(){ 

            $("#bokeh_container").remove();
            if (q==0){
                min = 30,
                max = 30,
                bokeh_count = 1;
            }
            else if (q==1){
                min = 7,
                max = 10,
                bokeh_count = 300;
            }
            else if (q==2){
                min = 7,
                max = 15,
                bokeh_count = 300;  
            }
            else if (q==3){
                min = 8,
                max = 11,
                bokeh_count = 500;  
            }

            sum = min+max;

            window_width = $(document).width(); 

            window_height = $(window).height();

            colorful = $("#colorful").attr("checked");

            var container = $("<div />",{"id":"bokeh_container","style":"width:100%; height:100%; position:absolute; left:50%; margin-left:-600px; top:0px; z-index:1; display:none; "});

            for( var i=0;i<bokeh_count;i++){

                $("<div />",{"class":"bokeh","style":get_bokeh()}).appendTo(container);

            }

            container.appendTo("body").show();

Running Firefox 5, it would seem to be performing without any problems. — Jared Farrish, Jul 23 '11 at 02:28
Do you by any chance have Firebug active while doing this testing? If so, does turning that off help? — Boris Zbarsky, Jul 23 '11 at 04:51

score 1 · Answer 1 · answered Jul 23 '11 at 04:41

1

You should remove the .appendTo in your for loop. You are telling the browser to create the add to the dom every iteration which is expensive. Instead add the objects to an array or concat them to a string (much cheaper) then do a single append afterwards.

var html = '';
for( var i=0;i<bokeh_count;i++){
    html += '<div class="bokeh" style="'+ get_bokeh()+ '"></div>';
}
var container = $("<div />",{"id":"bokeh_container","style":"width:100%; height:100%; position:absolute; left:50%; margin-left:-600px; top:0px; z-index:1; display:none; "}).html(html);
$('body').append(container);

answered Jul 23 '11 at 04:41

Brombomb

6,988
4
38
57

I wrote a similar implementation before but to no avail. It may render faster on paper but it's still slow as before in Firefox. I'm beginning to think the actual generation of the divs isn't the problem? I really have no idea why this would happen. Is V8 really that much more powerful than tracemonkey? Although I've tested it on the Nightly build of firefox v 8.01 and it's still just as slow. Anyone have any clues? – Oliver Jul 23 '11 at 17:25

score 0 · Answer 2 · answered Jul 23 '11 at 03:49

Check out this jsperf test: http://jsperf.com/test-of-jquery-appendto.

Building the HTML into a string and then adding it to the DOM all at once shows as 2-3x faster in Chrome and Firefox and almost 5x faster in IE8. This isn't a perfect simulation of what you're doing, but probably worth looking at.

score 0 · Answer 3 · answered Jul 23 '11 at 04:15

0

Your code is not much slower in FF than in Chrome.

See and run this performance test of it.

Also, you might want to do the standard: shut-down Firefox, run Ccleaner, restart FF dance.

answered Jul 23 '11 at 04:15

Brock Adams

90,639
22
233
295

score 0 · Answer 4 · answered Jul 23 '11 at 04:25

Why dont you use css classes instead of inline styles? I see you have bunch of style attributes set for the container and even for the div in the loop. If you set these styles in class and use the class instead it will definately improve the performance as jquery dont have to iterate through all the properties while creating the element.

Firefox Jquery appendTo inefficiency?

4 Answers4