DOM-манипуляции, выполняемые на этапе компиляции, запускаются один раз и распространяются всегда - что это значит

Question

Я читаю эту статью об оптимизации угловой производительности, и там есть следующий отрывок:

Функции компиляции директивы запускаются до присоединения области и являются идеальным местом для выполнения любых манипуляций с DOM (например, связывание событий). С точки зрения производительности важно признать, что элемент и атрибуты, передаваемые в функцию компиляции, представляют необработанный HTML-шаблон до того, как были внесены какие-либо изменения в angular. На практике это означает, что DOM-манипуляции, выполненные здесь, будут выполняться один раз и распространяться всегда. Другим важным моментом, который часто скрывают, является различие между предварительной ссылкой и последующей ссылкой. Короче говоря, предварительные ссылки запускаются снаружи, а постлинки - изнутри. Таким образом, предварительные ссылки предлагают небольшое повышение производительности, поскольку они препятствуют выполнению внутренними директивами второго цикла дайджеста, когда родитель изменяет область действия в предварительной ссылке. Однако дочерний DOM может быть недоступен.

Я не могу понять эти две части и как я могу использовать их для повышения производительности:

На практике это означает, что DOM-манипуляции, выполненные здесь, будут выполняться один раз и распространяться всегда.

И это

предварительные ссылки предлагают небольшое повышение производительности, поскольку они не позволяют внутренним директивам запускать второй цикл дайджеста, когда родитель изменяет область видимости в предварительной ссылке

Я был бы признателен, если бы кто-нибудь мог высказаться по этому поводу.

Answer 1

На практике это означает, что DOM-манипуляции, выполненные здесь, будут выполняться один раз и распространяться всегда.

Запустить один раз?

Это относится к процессу компиляции AngularJS. Когда AngularJS-компилятор проходит через DOM, он скомпилирует директивы, которые он найдет ровно один раз.

Манипуляция DOM?

Когда вызывается функция компиляции директивы, появляется возможность изменить HTML перед компилятором AngularJS.

Всегда распространять?

Это просто означает, что окончательный DOM определяется в конце процесса компиляции.

пример

Чтобы достичь цели, рассмотрим следующий пример:

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

Компилятор AngularJS сначала посетит прародителя, затем родителя и, наконец, потомка.

Существует три возможности изменить HTML перед угловой компиляцией:

1. директива1 функция компиляции
2. директива2 функция компиляции
3. директива3 функция компиляции

Теперь рассмотрим, как изменяется окончательный HTML, когда мы манипулируем DOM в функции компиляции для директивы1:

Когда вызывается функция компиляции directive1:

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

В функции компиляции давайте изменим HTML перед компилятором AngularJS:

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