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

Question

我正在读这篇关于角度性能优化的文章,那里有以下段落:

Directive的编译函数在附加作用域之前运行,是运行任何DOM操作(例如绑定事件)的理想位置.从性能的角度来看,重要的是,在进行任何角度更改之前,传递给compile函数的元素和属性代表原始html模板.这在实践中意味着在这里完成的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的compile函数中操作DOM时最终的HTML如何变化:

当调用directive1的compile函数时:

<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