JQuery - создать рекурсивное дерево - отнимает много времени

Question

Мне нужно получить источник данных json с помощью ajax, а затем отобразить его в формате html TREE.**) Я написал свой код в машинописном тексте.

В одном примере 413 узлов существуют с 3 уровнями дерева.

Сначала я узнаю родительские дочерние элементы и вызываю getLiNode для каждого.Затем для каждого родителя я получаю детей и делаю предыдущий процесс для каждого и так далее.**) Для привязки данных json к каждому узлу я использовал handlebasrsjs.

Моя проблема заключается в том, что генерация узлов дерева с таким подходом имеет очень низкую производительность и часто занимает более 2 секунд.

Здесьмой код:

static createParentNodes($tree: JQuery, $nodeContainer: JQuery, nodes: any, settings: any) {
    let $ul = $('<ul></ul>');
    $ul.appendTo($nodeContainer);
    nodes.forEach(function (s: any, e: any) {
        gmTree.getLiNode($tree, $ul, s, settings);
    });
}
static getLiNode($tree: JQuery, $node: JQuery, data: any, settings: any) {
    let $li = $('<li class="treeLi" data-id="' + data.id + '"></li>');
    let $parent = $node.closest('li');
    let treeId = $tree.attr("id");
    $li.data("nodeData", data);
    if (settings != null) $li.data("parentId", settings.parentId);
    $li.data("parent", $parent);
    $li.data("objectData", data);

    let $liNode = $('<div class="tree-li-data"></div>');
    let $expander = $('<span class="hidden" data-role="tree-expander"><i class="material-icons">add</i></span>');
    let checkboxId = 'chk_' + data.id;
    let $checkbox = $('<span class="hidden" data-role="tree-checkbox"><input type="checkbox" id="' + checkboxId + '" class="chk-col-blue"/><label for="' + checkboxId + '"></label></span>');
    let $display = $('<span data-role="tree-display" id="' + treeId + "Dis" + data.id + '"></span>');
    $expander.appendTo($liNode);
    $checkbox.appendTo($liNode);
    $display.appendTo($liNode);
    $liNode.appendTo($li);
    $li.appendTo($node);

    let finalData = data.data;
    if (finalData == undefined)
        finalData = data;
    let textTemplate: string = "";
    if (settings != null && settings.textTemplate != null)
        textTemplate = settings.textTemplate;

    if (textTemplate == undefined || textTemplate == "") {
        textTemplate = $tree.data("textTemplate");
    }
    var source = textTemplate;
    var template = Handlebars.compile(source);
    var result = template(finalData);
    $display.html(result);

    if (data.children.length > 0) {
        $expander.removeClass('hidden');

        gmTree.createParentNodes($tree, $li, data.children, { parentId: data.id });
    }
    else {
        $checkbox.removeClass('hidden');
    }
    $li.trigger(ON_NODE_CREATED, { data: finalData });

}

Изображение моего образца