angularjs - 在编译阶段完成的 DOM 操作运行一次，并始终传播 - 这意味着什么

Question

我在看 this article关于 Angular 性能优化，那里有以下段落:

Directive's compile functions run before scope is attached and are the perfect place to run any DOM manipulations (binding events for example). The important thing to recognize from a performance point of view, is that the element and attributes passed into the compile function represent the raw html template, before any of angular's changes have been made. What this means in practice is that DOM manipulation done here, will run once, and propagate always. Another important point that is frequently glossed over is the difference between prelink and postlink. In short, prelinks run from the outside in, while postlinks run from the inside out. As such, prelinks offer a slight performance boost, as they prevent the inner directives from running a second digest cycle when the parent modifies scope in the prelink. However, child DOM may not yet be available.

我无法理解这两部分以及如何使用它来提高性能:

What this means in practice is that DOM manipulation done here, will run once, and propagate always.

和这个

prelinks offer a slight performance boost, as they prevent the inner directives from running a second digest cycle when the parent modifies scope in the prelink

如果有人可以对此进行讨论，我将不胜感激。

Answer 1

What this means in practice is that DOM manipulation done here, will run once, and propagate always.

运行一次？

这是指 AngularJS 的编译过程。当 AngularJS 编译器遍历 DOM 时，它将只编译一次找到的指令。

DOM 操作？

当指令的编译函数被调用时，就有机会在 AngularJS 编译器之前修改 HTML。

永远传播？

这只是意味着最终的 DOM 是在编译过程结束时确定的。

例子

为了切入正题，请考虑以下示例:

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

AngularJS 编译器将首先访问祖 parent ，然后是 parent ，最后是 child 。

在 Angular 编译之前，有三种修改 HTML 的机会:

指令 1 编译函数

指令 2 编译函数

指令 3 编译函数

现在考虑当我们在指令 1 的编译函数中操作 DOM 时，最终的 HTML 是如何变化的:

当指令 1 的编译函数被调用时:

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

在 compile 函数中，让我们在 AngularJS 编译器之前更改 HTML:

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

在调用指令 1 的编译函数之后:

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

请注意 DOM 是如何变化的，以便指令 2 和指令 3 不再存在，指令 4 是下一个要编译的行。

prelinks offer a slight performance boost, as they prevent the inner directives from running a second digest cycle when the parent modifies scope in the prelink

唔。这对我来说毫无意义。据我了解，摘要阶段发生在链接前和链接后阶段之后。我不确定在链接前或链接后阶段修改范围将如何影响摘要周期。

以下图片已从本文中引用:
http://www.toptal.com/angular-js/angular-js-demystifying-directives