AngularJS optimization methods?

Question

JavaScript

I would like to listen and discuss how someone speeds up the work of AngularJS when working with big data, with complex interfaces.
I would like to hear a success story about minor optimizations (you can omit about reducing the number of watchers)

Answer 1

shorter $digest cycle duration - higher system performance and responsiveness. The number of watchers has nothing to do with the word. Only the time they all take to complete affects (you can have one watcher doing something complex, and a thousand simple ones can do it faster).
In general... everything that is related to data processing (filtering collections, forming other collections, etc.) should be performed in services (or, at worst, in controllers).
When displaying large, frequently changing collections, I use track by (very rarely, in fact, only when the DOM is frequently redrawn).
In view, everything should be as simple as possible, declarative, no wildly terrible conditions. In general, with a competent architecture, there are not many performance problems.
Well, again. No premature optimizations. Run a profiler, find bottlenecks and then just think.

Answer 2

1. Number of watchers per page. Yes Yes ). The fewer of them, the better.
2. One-time binding - If your data is used only for display (large tables, for example) and is not subject to user modification.
3. ng-if instead of ng-show
4. Avoid ng-style. If possible, wrap in directives and there jQuery.css()
5. Avoid {{ }}. Use ng-bind instead where possible
6. $compileProvider.debugInfoEnabled(false); - ok, but don't forget to enable if you have tests.
7. Profiler. As practice shows, programmers optimize one thing, and slow down another.
8. General advice - transfer "heavy" logic, if possible, to the server. Client, the simpler the better.

Answer 3

In my practice, the biggest performance problems have been due to the fact that I forgot to cancel watch and bind events when destroying directives. You need to do scope.$on('$destroy', function() {}); If such directives got into big ng-repeat the browser sometimes simply died.
I will add that Angular has a setting that by default makes it possible to get the scope from the DOM element and adds classes like ng-scope, ng-isolated-scope. This can be useful during development and testing, but for the production version, it's best to turn it off, it will slightly improve performance.

myApp.config(['$compileProvider', function ($compileProvider) {
  $compileProvider.debugInfoEnabled(false);
}]);

Read more: https://docs.angularjs.org/guide/production

Answer 4

A couple of tips can be found here - Top 18 Most Common AngularJS Developer Mistakes