angularjs - 即使有大量 DOM 元素也能提高 AngularJS 性能的方法

Question

我正在评估是否将 AngularJS 用于 Web 项目，并且我担心我需要实现的功能的性能。我想知道是否有更好的方法来实现我试图在 AngularJS 中实现的功能。

从本质上讲，在我看来，AngularJS 对事件使用react所需的时间取决于页面中 DOM 元素的数量，即使 DOM 元素没有被主动更改等。我猜这是因为$digest 函数正在遍历整个 DOM .. 至少从我的实验来看，似乎是这样。

这是游戏场景(这并不是我真正想要做的，但对于测试目的来说已经足够接近了)。

当我将鼠标悬停在一个单词上时，我想让 angularJS 突出显示它。但是，随着页面中单词数量的增加，将鼠标悬停在单词上与实际突出显示之间的延迟会更大。

显示此内容的 jsfiddle:http://jsfiddle.net/czerwin/5qFzg/4/

(信用:此代码基于 Peter Bacon Darwin 在 AngularJS 论坛上的帖子)。

这是 HTML:

<div ng-app="myApp">
    <div ng-controller="ControllerA">
        <div >
            <span ng-repeat="i in list" id="{{i}}" ng-mouseover='onMouseover(i)'>
                {{i}}, 
            </span>
            <span ng-repeat="i in listB">
                {{i}}, 
            </span>
        </div>
    </div>
</div>

这是javascript:

angular.module('myApp', [])
.controller('ControllerA', function($scope) {
    var i;
    $scope.list = [];
    for (i = 0; i < 500; i++) {
        $scope.list.push(i);
    }

    $scope.listB = [];
    for (i = 500; i < 10000; i++) {
        $scope.listB.push(i);
    }

    $scope.highlightedItem = 0;
    $scope.onMouseover = function(i) {
        $scope.highlightedItem = i;
    };

    $scope.$watch('highlightedItem', function(n, o) {
        $("#" + o).removeClass("highlight");
        $("#" + n).addClass("highlight");
    });
});

注意事项:
- 是的，我正在使用 jquery 进行 DOM 操作。我走这条路是因为这是一种注册一个观察者的方式。如果我纯粹在 angularJS 中执行此操作，则必须为每个跨度注册一个鼠标悬停处理程序，这似乎也会使页面变慢。
- 我也在纯 jquery 中实现了这种方法，并且性能很好。我不相信是 jquery 调用让我放慢了速度。
- 我只在前 500 个单词中添加了 id 和 classes，以验证它确实只是有更多的 DOM 元素似乎减慢了它们的速度(而不是可能受操作影响的 DOM 元素)。

Answer 1

我认为解决性能问题的最好方法是避免在这种情况下使用高级抽象(AngularJS ng-repeat 和所有相应的背景魔法)。 AngularJS 不是 Elixir ，它与低级库完美配合。如果您喜欢文本块中的此类功能，您可以创建一个指令，它将作为文本的容器并封装所有低级逻辑。带有自定义指令的示例，它使用了 letteringjs jquery 插件:

angular.module('myApp', [])
  .directive('highlightZone', function () {
    return {
      restrict: 'C',
      transclude: true,
      template: '<div ng-transclude></div>',
      link: function (scope, element) {
        $(element).lettering('words')
      }
    }
  })

http://jsfiddle.net/j6DkW/1/