Angularjs Performance Optimization

Several conceptual domain $scope and update cycles digestcycle

The ANGULARJS domain is essentially a JavaScript object that inherits from some of the predefined objects. Basically, a small domain runs faster than a large domain.

Each creation of a new domain adds more content to be recycled to the garbage collector.

Each domain holds an array of methods consisting of $ $watchers.

Whenever a value (property) in a field or a bound DOM, such as Ng-repeat,ng-switch and ng-if, and so on, calls $watch, a function is added to the queue of $ $watchers array in the corresponding domain.

When a value in a field changes, all watchers functions in the $watchers are invoked. And when any one of them modifies a value in the domain, they are triggered again to execute. This process continues until the $ $watcher array queue is no longer making any changes or throws an exception.

Also, if any code executes $scope. $apply (), the update cycle is triggered.

General guidelines to follow when designing Angularjs large object and server calls

We want to simplify our objects as much as we can. This is especially important when an object is returned from the server.

monitoring functions (watching functions)

Do not bind anything (ng-show, ng-repeat, etc.) directly to a function. Do not directly monitor the return value of any function. The function executes at each update cycle and may slow down your app.

Monitoring objects (watching objects)

Although Angularjs provides a third optional parameter to monitor changes to the entire object-the third parameter that calls $watch is set to true. This is a very bad idea, and a better solution is to rely on service and object references to monitor changes between domains.

Code tips to keep in mind

Avoid calling functions inside loops

The more tightly the variable is scoped, the better the garbage collector can reclaim space faster.

Avoid using the Ng-repeat directive if possible

Rational use of disposable binding mechanism

ANGULARJS has introduced a useful feature in several recent updates: a one-time rendering template for certain variables, and they are not affected by future model changes. This is especially useful for improving performance, in general, setting up template data:

<i>{{tip}}</i>

Using the one-time variable rendering syntax can be:

<i>{{:: Tip}}</i>

This way, when angularjs finishes processing the DOM and the variable as usual, he removes these one-time variables in the internal $ $watchers monitor list.

Proper direct manipulation of the DOM

Angularjs Performance Optimization