AngularJs ng-repeat performance issues that must be noted
Ng-repeat of AngularJs allows us to easily traverse arrays to generate Dom elements, but improper use may also cause performance problems. In the project, after loading a list using ng-repeat, If you request data again and then filter the list, the Code may write as follows: <div ng-controller = "Test"> <button ng-click = "request () "> request new data </button> <div ng-repeat =" user in users ">{{ user. name }}</div> </div> Controller code: app. controller ('test', function ($ scope) {var users = []; for (var I = 0; I <100; I ++) {users [I] = {id: I, name: "User:" + I };}$ scope. users = users; $ scope. request = function () {// load new data from the server var result = []; // directly re-assign the value to users $ scope. users = result ;}}); check the ng-repeat source code and you will find that when the ng-repeat array is replaced, it will not reuse the existing Dom elements by default, instead, delete all of them and generate a new array Dom element: // remove all the previously generated dom for (key in lastBlockMap) {if (lastBlockMap. hasOwnProperty (key) {block = lastBlockMap [key]; elementsToRemove = getBlockElements (block. clone); $ animate. leave (elementsToRemove); forEach (elementsToRemove, function (element) {element [NG_REMOVED] = true;}); block. scope. $ destroy ();}}