Question

我的应用程序有数千条日志行。每个日志行都是静态的，永远不会改变。每个日志行在ng-repeat内转换为5-10个DOM元素。

我尝试使用bindonce，但好处几乎不存在。我还尝试编写一个自定义指令来缓存编译结果：

.directive('logLine', function ($compile) {
    var template = $compile(logTemplate);
    var cache = {};
    return {
        scope: {
            line: '=logLine',
        },
        restrict: 'A',
        link: function($scope, $element) {
            if (!cache.hasOwnProperty($scope.line.id)) {
                template($scope, function(cloned){
                    cache[$scope.line.id] = cloned;
                });
            }

            $element.html(cache[$scope.line.id]);
        }
    };
})

虽然这会使程序加速约30％，但仍然非常缓慢。我的猜测是，每次页面更改时，大部分时间都花在删除和添加数百个DOM元素上。

所以我的问题是，有没有办法阻止AngularJS删除DOM元素，而是让我手动隐藏并再次显示它们？或者是否还有其他技巧来优化这种特定类型的应用程序？

Answer 1

您可以尝试使用一次性数据绑定而不是双向数据绑定。在ng-repeat中你需要做的就是将表达式加前缀以与::绑定。例如：

<div ng-repeat="something in whatever">
  {{::something.var}}
</div>

请参阅docs on one-time bindings。

为数百个静态元素优化ng-repeat（日志查看器）

1 个答案: