7

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

Directive 的编译函数在附加作用域之前运行，是运行任何 DOM 操作（例如绑定事件）的理想场所。从性能的角度来看，要认识到的重要一点是，传递给 compile 函数的元素和属性表示原始 html 模板，在 Angular 进行任何更改之前。这实际上意味着在这里完成的 DOM 操作将运行一次，并始终传播。另一个经常被忽略的重要点是预链接和后链接之间的区别。简而言之，预链接从外向内运行，而后链接从内向外运行。因此，预链接提供了轻微的性能提升，因为当父级修改预链接中的范围时，它们可以防止内部指令运行第二个摘要循环。

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

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

和这个

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

如果有人可以对此进行详细说明，我将不胜感激。

4

1 回答 1

7

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

运行一次？

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

DOM 操作？

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

总是传播？

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

例子

要想明白这一点，请考虑以下示例：

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

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

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

  1. 指令1编译函数
  2. 指令2编译函数
  3. 指令3编译函数

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

当directive1的编译函数被调用时：

<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>');
     }
});

调用directive1的编译函数后：

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

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

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

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

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

在此处输入图像描述

于 2015-04-09T10:45:18.993 回答