JavaScript性能問題，將離線添加到ul離線

Question

我有一個與性能相關的問題：需要10秒才能加載我的ul -it包含超過1000個li-。 你能指出我的問題在哪裏。我可以優化什麼？

此外，我讀取配置文件結果有一些麻煩。

注：直到我把它發送到沙盒

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

編輯 所以，我想字符串連接的DOM元素模板離線：

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

它的工作速度不夠快！ 但是現在我在我的JS中有HTML代碼片段，如果網頁設計師需要皮條客，他必須去JS文件。

但我想這個問題沒有解決方法，是嗎？

Answer 1

您可以嘗試創建一個變量並將所有數據存儲在其中。一旦你完成循環，將它追加到你想要的元素，所以你不必多次調用追加。

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

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

就是這樣的。