Question

考虑以下小提琴： http://jsfiddle.net/nug671xm/1/

这是一个简单的树形布局。首先单击加号创建子项，后续单击会展开并折叠子树。对于大量的孩子来说，创作需要比其他动作更长的时间。我认为$ compile调用大部分时间都在消耗。

原因是什么？是否有办法加快速度？

指令代码：

myApp.directive('myTree', ['$compile', function ($compile) {
    return {
        link: function (scope, element, attrs) {
            var template =
                '<ul><li ng-repeat="node in node.children">' +
                '<span ng-click="displayTree.selectNodeHead(node)">+ </span>' +
                '<span>{{node.name}}</span>' +
                '<div ng-hide="node.collapsed" my-tree></div></li></ul>';
            element.html('').append($compile(template)(scope));
        }
    };
}]);

Answer 1

对于大型迭代，

ng-repeat和$compile()的速度非常慢。使用本机JavaScript进行迭代并添加HTML字符串，然后使用本机onclick命令代替ng-click。这种方法需要一些重要的重新思考和代码重构，但性能优势是巨大的（我已经将500项ng-repeat转换为原生DOM，渲染时间从1.2s变为.06s（95％改进）。 / p>

以下是原生JS和Angular在1,000件商品上和谐地工作的一个例子。渲染和响应几乎是即时的。

http://codepen.io/anon/pen/ZGygBK

Angular $ compile很慢，如何避免

1 个答案: