JavaScript性能问题，将li添加到ul脱机

我有一个与性能相关的问题：加载我的ul需要10秒-它包含超过1000 li-。 你能告诉我问题出在哪里吗。我可以优化什么

此外，我有一些很多麻烦阅读配置文件的结果

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

编辑 所以我尝试了字符串连接：

 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文件

---

但是我想在这个问题上没有解决办法，是吗？

您可以尝试创建一个变量并将所有数据存储在其中。完成循环后，将其附加到所需的元素，这样就不必多次调用append

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

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

---

差不多吧

什么是模板？字符串还是DOM元素？\u template是字符串，$template是jquery DOM元素以字符串形式追加HTML片段比创建、操作和追加分离的DOM树要快——但这里最容易的瓶颈是不要同时追加所有1000个。你能修改用户体验，当你到达列表的底部时，可能会显示更多，并且一次可能只追加10或20个项目吗？你有10K个项目，你会多次循环并操纵它们。速度会很慢。@Adam我将尝试使用字符串连接。您应该将listData初始化为字符串-否则listData+='some data'的结果操作将导致未定义的some data'；字符串连接实际上更糟糕，我在这里做了一些测试@Su4p-无效测试-你仍然在每个循环迭代中更新innerHTML，你应该连接你的字符串，并且在循环完成后只更新innerHTML一次。你的测试在每个迭代中追加ul。在所有迭代完成后，您应该只追加一次。因为重画DOM很昂贵，我不太喜欢在我的JS文件中有HTML片段。。。但我必须承认它更快。