Question

I have the following code which fires off when Queue is clicked

$('#queue').click(function(){
        $("#feature").load("templates/queue.html", function(){
            var template = $('queue_item').clone();
            if (localStorage['queue'] == null) {
                $('.queue_list').append('<p>You have not added any video to the queue yet</p>');
            } else {
                var queue_list = JSON.parse(localStorage['queue']);
                for (var i = 0; i < queue_list.length; i++) {
                    console.log(queue_list[i]);
                    var item = fill_queue_item(queue_list[i]);
                    $('.queue_list').append(item).fadeIn('slow');
                }
            }
        });
    });

• Depending on number of items user added to queue this code creates a node and insert into queue_list
• When I test this on Firfox, things are pretty fine, but Safari and Chrome almost die to perform the same operation

Question
– How can I make Chrome and Safari happy like Firefox and let them do things fast?

UPDATE

function fill_queue_item(data) {
    var template = $('.queue_item').clone();
    template.removeClass('hide-item');
    template.find('img').attr('src', data.thumbnail);
    template.find('.title').html(data.title);
    template.attr('id', data.url);
    template.addClass('view-item');
    return template;
}

The queue can contain any number of items, but for Chrome/Safari it is not more than 20

Answer 1

I’d suggest changing:

var template = $('.queue_item').clone();

to this:

var template = $('.queue_item').first().clone();

The way you have it now, you are cloning every single .queue_item so as you add more and more, you are creating a lot of unnecessary clones when you really only mean to create one new clone each time to use as a template. If you did this 20 times on the previous results each time, you could end up with 2^20 cloned elements which would be over a million objects.