在编译阶段完成的DOM操作只运行一次，并且总是传播 - 这意味着什么

Question

我正在阅读关于角度性能优化的this article，并且有以下段落：

  

指令的编译函数在附加作用域之前运行，并且是   完美的地方运行任何DOM操作（绑定事件为   例）。从性能角度来认识的重要事项   view，是传递给compile的元素和属性   function表示原始html模板，在任何angular之前   已经做出了改变。这在实践中意味着DOM   在这里完成的操作，将运行一次，并始终传播。另一个   经常被掩盖的重点是差异   在prelink和postlink之间。简而言之，预链接从外部运行   在，而postlinks从内到外运行。因此，预链接提供了一个   轻微的性能提升，因为它们阻止了内部指令   父进程修改范围时运行第二个摘要循环   预链接。但是，儿童DOM可能尚未推出。

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

  

这在实践中意味着DOM   在这里完成的操作，将运行一次，并始终传播。

这个

  

prelinks提供了一个   轻微的性能提升，因为它们阻止了内部指令   父进程修改范围时运行第二个摘要循环   预链接

如果有人能够对此表示赞赏，我将不胜感激。

Answer 1

  

这在实践中意味着在这里完成的DOM操作会   运行一次，并始终传播。

运行一次？

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

DOM操作？

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

始终传播？

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

实施例

要点回家，请考虑以下示例：

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

AngularJS编译器首先访问祖父母，然后访问父母，最后访问孩子。

在角度编译之前有三次机会修改HTML：

1. directive1编译功能
2. directive2编译功能
3. directive3编译功能

现在考虑当我们在directive1的编译函数中操作DOM时最终的HTML如何变化：

调用directive1的编译函数时：

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

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

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

调用directive1的编译函数后：

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

注意DOM如何更改，以便指令2和指令3不再存在，并且下一个指令4将被编译。

  

prelinks提供了轻微的性能提升，因为它们阻止了内部   父修改时运行第二个摘要循环的指令   预链接中的范围

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

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