Избавляемся от лишних $watch’еров

в 22:47, , рубрики: AngularJS, data-binding, directives, javascript, метки: , , ,

Хотел бы поделиться небольшой заметкой о том, как ускорить выполнение $digest() путем замены стандартных директив эквивалентами, которые не вызывают $watch.

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

<h1 ng-bind="l10n.main_title"></h1>

<a ng-href="/edit/{{user.id}}" ng-bind="user.name"></a>

Эти и другие стандартные директивы любезно будут проверять не изменилось ли значение выражения при каждом $digest. Исправить ситуацию можно набором довольно простых кастомных директив, например для текста:

app.directive(staticText', function() {
    return {
      restrict: "A"
      link: function(scope, element, attrs) {
        element.text(scope.$eval(attrs.customText));
      }
    };
  })

<h1 custom-text="l10n.main_title"></h1>

Результат — минус один $watch.
Выдумывать свой велосипед конечно же не нужно, на GitHub лежат два достойных модуля:

Первый ($watch fighters) совсем простой, включает в себя такие директивы:

  • set-title
  • set-href
  • set-text
  • set-html
  • set-class
  • set-if

Второй же (Bindonce) интереснее, т.к. разработчики подумали о том, что данные для биндинга могут быть недоступны в момент рендеринга шаблона директивы (например, они подгружаются ajax-запросом). Выглядит это так:

<div bindonce="User">
<h1 bo-text="User.name"></h1>
</div>

Для родительской директивы bindonce создается времменый $watch, когда значение переданной в неё переменной становится отличным от undefined запускаются вложенные bo-* директивы, а временный $watch удаляется.
Модуль Bindonce включает:

  • bo-if
  • bo-show
  • bo-hide
  • bo-text
  • bo-html
  • bo-href
  • bo-src
  • bo-class
  • bo-alt
  • bo-title
  • bo-id
  • bo-style
  • bo-value
  • bo-attr bo-attr-foo

Более подробно можно почитать на странице репозитория, там довольно развернутый readme.

На последок приведу функцию, которую нашел здесь. Она примерно подсчитывает общее количество $watch'еров на странице.

(function () { 
    var root = $(document.getElementsByTagName('body'));
    var watchers = [];

    var f = function (element) {
        if (element.data().hasOwnProperty('$scope')) {
            angular.forEach(element.data().$scope.$$watchers, function (watcher) {
                watchers.push(watcher);
            });
        }

        angular.forEach(element.children(), function (childElement) {
            f($(childElement));
        });
    };

    f(root);

    console.log(watchers.length);
})();

Ради интересы можно сравнить количество до и поле внедрения zero-watch директив.
Надеюсь кому то пригодится. Спасибо.

Автор: snater

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js