Question

我有以下代码，在点击Queue时会触发

$('#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');
                }
            }
        });
    });

根据添加到队列的items用户的数量，此代码会创建一个节点并插入queue_list
当我在Firfox上测试时，情况非常好，但是Safari和Chrome几乎死了以执行相同的操作

问题 - 如何让Chrome和Safari像Firefox一样快乐，让他们快速做事？

更新

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;
}

queue可以包含任意数量的项目，但对于Chrome / Safari，它不超过20个

Answer 1

我建议改变：

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

到此：

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

你现在拥有它的方式，你正在克隆每一个.queue_item，所以当你添加越来越多时，你创建了许多不必要的克隆，当你真的只想创建一个新的克隆每次使用作为模板。如果你每次在之前的结果上做了20次，那么最终可能会有超过一百万个对象的2^20克隆元素。

Chrome浏览器在浏览localStorage时挂起，而Firefox很好用吗？

1 个答案: