Проблема с производительностью JavaScript, добавление li в ul в автономном режиме

Question

У меня проблема с производительностью: она занимает 10 секунд для загрузки моего ul -it содержит более 1000 литров. Можете ли вы указать мне, где проблема. Что я могу оптимизировать?

Кроме того, у меня есть некоторые проблемы с чтением результата.

NB: шаблон элемент DOM отсутствует, пока я не отправить его в песочницу

var displayAllHypotheses = function() { 
    console.time('displayAllHypotheses'); 
    console.profile('displayAllHypotheses'); 

    var $template = $(_template); 
    var $item_example = $template.find('#item-example').clone(); 
    var $list = $template.find('.content-ask ul.select-hypothese'); 

    $item_example.removeAttr('id'); 
    $template.find('#item-example').remove(); 

    _$template_item_selected = $template.find('.item-example').removeClass('item-example').clone(); 
    for (var i in _data_game.Hypotheses) { 

     var $clone = $item_example.clone(); 
     var $a_select_hypothese = $clone.find('a'); 
     $a_select_hypothese.html(_data_game.Hypotheses[i].nom).data('hypotheseid', _data_game.Hypotheses[i].id); 
     $a_select_hypothese.attr('href', '#' + i); 
     if (!!_hypotheses_selected[_data_game.Hypotheses[i].id]) { 
      $a_select_hypothese.addClass('inDaList'); 
     } 
     $clone.appendTo($list); 
    } 

    $list.find('a').click(function() { 

     $('#mod_hypothese .part-select .select-hypothese a').removeClass('selected'); 
     $(this).addClass('selected'); 
     displayChooseButton(); 

    }); 
    $item_example = null; 
    $a_select_hypothese = null; 
    $clone = null; 
    $list = null; 
    console.timeEnd('displayAllHypotheses'); 
    console.profileEnd('displayAllHypotheses'); 
    return $template; 
}; 
var initTemplate = function (data) { 
    console.time('initTemplate hypothese'); 
    console.profile('initTemplate hypothese'); 

    _template = data; 
    var $template = displayAllHypotheses(); 

    $template.find('.close-modal').click(function() { 
     _sandbox.notify('close hypothese', null); 
    }); 
    _sandbox.setTemplate($template); 
    initSearchBox(); 
    displaySelectedHypotheses(); 
    $template = null; 

    console.timeEnd('initTemplate hypothese'); 
    console.profileEnd('initTemplate hypothese'); 
}; 

EDIT Так я попробовал конкатенации:

var displayAllHypothesesString = function() { 
    console.time('displayAllHypothesesString'); 
    console.profile('displayAllHypothesesString'); 
    var $template = $(_template); 
    var $list = $template.find('.content-ask ul.select-hypothese'); 
    var lis = ''; 
    _$template_item_selected = $template.find('.item-example').removeClass('item-example').clone(); 
    for (var i in _data_game.Hypotheses) { 

     if (!_hypotheses_selected[_data_game.Hypotheses[i].id]) { 
      lis += '<li><a data-hypotheseid="' + _data_game.Hypotheses[i].id + '" href="#' + i + '">' + _data_game.Hypotheses[i].nom + '</a></li>'; 
     } else { 
      lis += '<li><a class="inDaList" data-hypotheseid="' + _data_game.Hypotheses[i].id + '" href="#' + i + '">' + _data_game.Hypotheses[i].nom + '</a></li>'; 

     } 
    } 
    $list.empty().append(lis); 
    $list.find('a').click(function() { 

     $('#mod_hypothese .part-select .select-hypothese a').removeClass('selected'); 
     $(this).addClass('selected'); 
     displayChooseButton(); 

    }); 

    console.timeEnd('displayAllHypothesesString'); 
    console.profileEnd('displayAllHypothesesString'); 
    return $template; 
}; 

Он работает достаточно быстро !! Но теперь у меня есть фрагмент HTML в моем JS, и если веб-дизайнеру нужно сутулиться, он должен будет перейти в JS-файл.

Но я думаю, что в этом вопросе нет обходного пути, не так ли?

Answer 1

Вы можете попробовать создать переменную и сохранить в ней все данные. После того, как вы закончите цикл, добавьте его к элементу, который вы хотите, поэтому вам не нужно многократно добавлять append.

var listData; 
for(var i; i<data.length; i++) 
    listData += "<li>some data</li>" 

$("#element").html(listData) 

Нечто подобное.