jquery - 创建递归树 - 耗时

Question

我需要通过ajax检索json数据源，然后将其渲染为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 });

}

Image of my sample