Я оцениваю, следует ли использовать AngularJS для веб-проекта, и я беспокоюсь о производительности для функции, которую мне нужно реализовать. Я хотел бы знать, есть ли лучший способ реализовать функциональность, которую я пытаюсь использовать в AngularJS.
По сути, мне кажется, что время, которое AngularJS реагирует на событие, зависит от количества элементов DOM на странице, даже если элементы DOM не меняются активно и т.д. Я предполагаю, что это потому что функция $digest пересекает всю DOM.. по крайней мере из моих экспериментов, похоже, что это так.
Здесь сценарий игры (это не совсем то, что я действительно пытаюсь сделать, но достаточно близко для тестирования).
Я хотел бы, чтобы angularJS выделял слово, когда я наводил на него курсор. Однако по мере увеличения количества слов на странице происходит большая задержка между тем, когда вы наводите курсор на слово и когда оно действительно выделено.
jsfiddle, который показывает это: http://jsfiddle.net/czerwin/5qFzg/4/
(Кредит: этот код основан на сообщении от Питера Бэкона Дарвина на форуме 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 слов, чтобы иметь идентификаторы и классы, чтобы убедиться, что на самом деле просто есть больше элементов DOM, которые, кажется, замедляют их (вместо элементов DOM, на которые может повлиять операция).
