Chrome，Safari在从本地存储读取时挂起，而Firefox很好

Chrome, Safari hangs while reading from localStorage while Firefox is good?

本文关键字：挂起 Firefox 很好 读取 Safari Chrome 存储      更新时间：2023-09-26

我有以下代码，单击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

个

我建议更改：

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

对此：

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

现在拥有它的方式，你正在克隆每一个.queue_item所以随着你添加越来越多的，你正在创建很多不必要的克隆，而你实际上只是想每次创建一个新克隆作为模板。 如果每次对之前的结果执行此操作 20 次，则最终可能会得到2^20个克隆元素，这些元素将超过 100 万个对象。

相关文章：