Angularjs Ng重复与在jquery中创建dom

我正试图用javascript保存一个完整的菜单，以便用户能够快速加载它（我知道它会进入内存，但不会太糟糕，而且应该不会很快增长）

我的问题是，如果我用简单的javascript生成它，它几乎会立即被创建，而如果我使用ng repeat，它会慢得多

这有点混乱，我对它进行了简化，因为我还添加了类和其他属性，但您应该从中了解要点

我知道我可以通过使用指令进一步简化以下重复的html，但性能将是相同的，所以请耐心等待

---

使用ng repeat（4个嵌套循环）：

现在，通过在js/jquery中动态生成dom元素来生成它：

function printCategoriesMenu(list, fatherElem, idObj, currPath, level){
    for (var i = 0; i < list.length; i++){
        var currElem = list[i];

        var thisElemsPath = currPath;
        if (level == 0){
            thisElemsPath += currElem.name;
        } else {
            thisElemsPath += "/" + currElem.name;
        }

        var el_a = document.createElement('a');

        var el_span = document.createElement("span");
        el_span.textContent = currElem.name;

        el_a.appendChild(el_span);

        var el_div = document.createElement("div");
        el_div.setAttribute("id", idObj.eid + "_children");

        fatherElem.appendChild(el_a);
        fatherElem.appendChild(el_div);

        idObj.eid++;

        if (currElem.children.length > 0){
            printCategoriesMenu( currElem.children, el_div, idObj, thisElemsPath, level+1 );
        }
    }
}

jQuery(document).ready(function(){
    var start = window.performance.now();
    console.log("START TIME: " + start);
    printCategoriesMenu( catList, document.getElementById('categoriesList'), {'eid': 0}, "", 0 );
    var end = window.performance.now();
    console.log("END TIME: " + end);
    console.log("time: " + (end - start) );
})

函数printCategoriesMenu（列表、fatherElem、idObj、currPath、级别）{
对于（变量i=0；i0）{
printCategoriesMenu（currElem.children、el_div、idObj、ThiselmPath、level+1）；
}
}
}
jQuery（文档）.ready（函数（）{
var start=window.performance.now（）；
console.log（“开始时间：+START”）；
printCategoriesMenu（catList，document.getElementById（'categoriesList'），{eid'：0}，“，0）；
var end=window.performance.now（）；
console.log（“结束时间：+END”）；
log（“时间：”+（结束-开始））；
})



在我添加了各种属性（class，ng click/onclick..）之后，使用ng repeat的性能更差，并且在第一次加载页面时有很差的延迟

到目前为止，我尝试使用angular来提高it的性能：


使用ng repeat，会有很多双向绑定发生，所以我尝试使用“bindonce”，它似乎对性能没有太大影响（如果有的话）

尝试使用“跟踪”，性能没有差异

尝试使用Limito在不同的时间生成子类别（我将首先生成第一个级别和第二个级别；当用户选择第一个类别时，将加载第三个子类别，等等）。这工作得更好，但是当用户选择一个类别时，生成子类别级别时会有延迟（ng repeat是同步的，这看起来不太好-看起来页面冻结了1-2秒：（）

在js/jquery文件中保存菜单生成部分很不方便，而其他所有内容都是角度应用程序，因此我尝试动态生成dom（因此不使用ng repeat）在我的控制器中，通过指令思维，我将能够获得与js/jquery相同的性能。不幸的是，它的速度与使用ng repeat一样慢（很抱歉，我没有用于此部分的JSFIDLE）。此部分确实令人失望：(


我看到了一些关于优化ng repeat性能的帖子，以及观察每个元素创建了多少观察者等。我希望在完成这个项目后尽快这样做

有什么建议吗

谢谢，
米海

function printCategoriesMenu(list, fatherElem, idObj, currPath, level){
    for (var i = 0; i < list.length; i++){
        var currElem = list[i];

        var thisElemsPath = currPath;
        if (level == 0){
            thisElemsPath += currElem.name;
        } else {
            thisElemsPath += "/" + currElem.name;
        }

        var el_a = document.createElement('a');

        var el_span = document.createElement("span");
        el_span.textContent = currElem.name;

        el_a.appendChild(el_span);

        var el_div = document.createElement("div");
        el_div.setAttribute("id", idObj.eid + "_children");

        fatherElem.appendChild(el_a);
        fatherElem.appendChild(el_div);

        idObj.eid++;

        if (currElem.children.length > 0){
            printCategoriesMenu( currElem.children, el_div, idObj, thisElemsPath, level+1 );
        }
    }
}

jQuery(document).ready(function(){
    var start = window.performance.now();
    console.log("START TIME: " + start);
    printCategoriesMenu( catList, document.getElementById('categoriesList'), {'eid': 0}, "", 0 );
    var end = window.performance.now();
    console.log("END TIME: " + end);
    console.log("time: " + (end - start) );
})