JavaScript performance issue, appending li into ul offline

Question

I have a performance related issue : it takes 10sec to load my ul -it contains more than 1000 li-. Can you point me where the problem is. What can I optimize ?

Moreover I have some much trouble to read the profile result.

NB: the DOM element template is offline until I send it to the sandbox

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 So I tried the string concatenation :

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

It's working fast enough !! But now I have HTML snippet in my JS and if the web designer need to pimp the li he'll have to go to the JS file.

But I guess there is no workaround on this issue, is there ?

Answer 1

You can try creating a variable and store all the data in it. Once you completed the loop, append it to the element you want so you dont have to call append that many times.

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

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

Something like that.