The DOM manipulation performed at the compilation stage is performed once and is always distributed - what does it mean

Question

I read this article on angular performance optimization and there is the following excerpt:

The compilation functions of the directive are started before the application area is connected, and the ideal place to start any manipulation of the DOM (binding events for example). It is important to note that in terms of view performance, the element and attributes passed to the compilation function is a raw html template before any of the angular changes are made. In practice, this means that the DOM manipulations performed here will be performed once and always propagated. Another important point that is often obscured is the difference between prelink and postlink. In short, prelinks are triggered externally while postlinks are triggered internally. In this way, prelinks offer a slight increase in performance because they prevent internal directives from starting the second digest cycle when the parent changes the scope in Prelink. However, the child DOM is not yet available.

I can not understand these two parts and how I can use them to improve performance:

In practice, this means that the DOM manipulations performed here will be performed once and always propagated.

And this one

Prefixes

offer a slight performance boost because they prevent internal directives from starting the second digest cycle when the parent changes the scope in Prelink

I would appreciate it if anyone could do this.

Answer 1

In practice, this means that the DOM manipulation done here will run once and always spread.

Run once?

This applies to the AngularJS compilation process. When the AngularJS compiler crosses the DOM, it compiles the directives that it finds exactly once.

DOM manipulation?

When the directive compilation function is called, it is possible to change the HTML before the AngularJS compiler.

Always distribute?

This means that the final DOM is determined at the end of the compilation process.

Example

To get to the point of the house, consider the following example:

<div directive1> <!-- grandparent --> <div directive2> <!-- parent --> <div directive3> <!-- child --> </div> </div> </div> 

The AngularJS compiler will first visit the progenitor, then the parent, and finally the child.

There are three ways to change HTML before compiling angular:

• directive 1 compilation function
• directive 2 compilation function
• directive 3 compilation function

Now let's see how the final HTML changes when we manipulate the DOM in the compilation function for directive 1:

When the directive1 compilation function is called:

 <div directive1> <!-- compiled --> <div directive2> <!-- not compiled --> <div directive3> <!-- not compiled --> </div> </div> </div> 

In the compilation function, change the HTML before the AngularJS compiler:

 app.directive('directive1', function() { restrict: 'A', compile: function($element, $attr) { // $element points to directive1 element $element.html('<div directive4></div>'); } }); 

After calling the compilation function for directive 1:

 <div directive1> <!-- compiled --> <div directive4> <!-- not compiled --> </div> </div> 

Pay attention to how the DOM changes, so directive 2 and directive 3 no longer exist, and directives 4 are next on the line for compilation.

prelinks offer slight performance improvements as they prevent the internal directives from starting the second digest cycle when the parent modifies the scope in prelink

Hm. It makes no sense to me. As I understand it, the digest phase occurs after the phases of the preliminary link and post link. I'm not sure how changing the scope in the phases of a prelink or post link will affect the digest cycle.

This image contains the following image: http://www.toptal.com/angular-js/angular-js-demystifying-directives