Performance of ng-repeat with dynamically generated array of data

Question

Let's say I have an array of objects and that each object has a unique ID and a text property.

Now, let's say I have a ng-repeat like this one:

Controller

$scope.data = my_arr;

View

<div ng-repeat="for elem in data track by elem.id">
    {{ elem.text }}
</div>

Special note on the track by.

What would happen if I assigned a completely new array to the data variable ($scope.data = new_arr;), if the content of this new array:

is completely identical to the previous one
it contains 1 new element
it contais all elements except 1

Will AngularJS be smart enough to:

not re-render all div elements
append/insert only the new div element to the DOM
hide/delete only the div that isn't contained in the new array

Should the ng-repeat expression be "for elem in data track by elem.id"? — slbteam08
– slbteam08, Commented Feb 8, 2016 at 10:20

Iso · Accepted Answer · 2016-02-06 17:19:15Z

1

Since you’re using track by elem.id, Angular will reuse DOM elements. It will only add or remove one element to the document tree. Per the docs:

Should you reload your data later, ngRepeat will not have to rebuild the DOM elements for items it has already rendered, even if the JavaScript objects in the collection have been substituted for new ones.

answered Feb 6, 2016 at 17:19

Iso

3,23825 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Alexander Nestorov Over a year ago

Yes, I'm concerned about this part: if the JavaScript objects in the collection have been substituted for new ones.. The thing is that this makes sense when you pull/push items from the same collection, but what would happen if the entire collection is changed? Hence, $scope.data = new_arr;

Iso Over a year ago

ngRepeat will check for matching ids and move / remove elements if needed, but will not remove an element then add it again for the same id.

Alexander Nestorov Over a year ago

Do you happen to know how could I test the rendering speed of ng-repeat (or pretty much any angular directive)?

Alexander Nestorov Over a year ago

And by "rendering speed" I mean the amount of time it takes from Angular detecting a change in the data set to the last operation related to actual rendering/DOM modifying.

Iso Over a year ago

I guess you could use Chrome Devtools to do this: addyosmani.com/blog/…

|

Collectives™ on Stack Overflow

Performance of ng-repeat with dynamically generated array of data

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related