如何改善AngularJS性能甚至与大量DOM元素 [英] Ways to improve AngularJS performance even with large number of DOM elements
问题描述
我在评估是否要使用AngularJS对于web项目，我很担心的一个功能，我需要实现的性能。我想知道是否有实现我试图在AngularJS功能的更好的方法。
I'm evaluating whether or not to use AngularJS for a web project, and I'm worried about the performance for a feature I need to implement. I would like to know if there's a better way to implement the functionality I'm trying to in AngularJS.
本质上，它似乎对我需要AngularJS对事件作出反应的时间取决于在页面的DOM元素的数量，即使当DOM元素不被积极地改变等我猜这是因为$消化功能遍历整个DOM ..在从我的实验中，这似乎是的情况下至少
Essentially, it seems to me the time it takes AngularJS to react to an event is dependent on the number of DOM elements in the page, even when the DOM elements aren't being actively changed, etc. I'm guessing this is because the $digest function is traversing the entire DOM.. at least from my experiments, that seems to be the case.
下面是剧中的场景（这不正是我真正想要做什么，但足够接近用于测试目的）。
Here's the play scenario (this isn't exactly what I'm really trying to do, but close enough for testing purposes).
我想有angularJS突出一个字，因为我在它悬停。然而，随着文字的页面数量的增加，还有就是当你将鼠标悬停在这个词，当它实际上是更加强调一个较大的延迟。
I would like to have angularJS highlight a word as I hover over it. However, as the number of words in the page increases, there's a larger delay between when you hover over the word and when it is actually highlighted.
这表明这一点的的jsfiddle： http://jsfiddle.net/czerwin/5qFzg/4/
The jsfiddle that shows this: http://jsfiddle.net/czerwin/5qFzg/4/
（来源：该code是基于彼得·培根达尔文在AngularJS论坛一个帖子）。
(Credit: this code is based on a post from Peter Bacon Darwin on the AngularJS forum).
这里是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的：
Here's the 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和类，以验证它确实只是有这似乎慢下来（而不是可能受该操作的影响DOM元素）更DOM元素
Things to note: - Yes, I'm using jquery to do the DOM manipulation. I went this route because it was a way to register one watcher. If I do it purely in angularJS, I would have to register a mouseover handler for each span, and that seemed to make the page slow as well. - I implemented this approach in pure jquery as well, and the performance was fine. I don't believe it's the jquery calls that are slowing me down here. - I only made the first 500 words to have id's and classes to verify that it's really just having more DOM elements that seems to slow them down (instead of DOM elements that could be affected by the operation).
推荐答案
我认为要解决性能问题的最佳方法是避免在这种情况下使用高层次的抽象（AngularJS NG-重复所有相应的背景魔法）。 AngularJS不是银弹，它是完全与底层库工作。如果您喜欢在文本块这样的功能，你可以创建一个指令，这将是对文本容器和incapsulate所有低级别的逻辑。定制指令，它使用实例letteringjs jQuery插件：
I think that the best way to solve performance issues is to avoid using high level abstractions (AngularJS ng-repeat with all corresponding background magic) in such situations. AngularJS is not a silver bullet and it's perfectly working with low level libraries. If you like such functionality in a text block, you can create a directive, which will be container for text and incapsulate all low level logic. Example with custom directive, which uses letteringjs jquery plugin:
angular.module('myApp', [])
.directive('highlightZone', function () {
return {
restrict: 'C',
transclude: true,
template: '<div ng-transclude></div>',
link: function (scope, element) {
$(element).lettering('words')
}
}
})
这篇关于如何改善AngularJS性能甚至与大量DOM元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
