0

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 以下です

4

1 に答える 1

1

変更することをお勧めします：

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

これに：

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

現在のように、すべてのクローンを作成して.queue_itemいるので、追加するたびに、テンプレートとして使用するために毎回1つの新しいクローンを作成するだけの場合は、不要なクローンを多数作成することになります。毎回前の結果に対してこれを20回実行すると2^20、100万を超えるオブジェクトになるクローン要素が作成される可能性があります。

于 2012-08-18T23:46:09.490 に答える