Question

我遇到与性能相关的问题：加载我的ul -it需要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文件。

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

Answer 1

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

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

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

这样的事情。

JavaScript性能问题，将li附加到ul offline

1 个答案: