Судя по этой статье, все очень похоже на React. Интересно как в Angular 2 применяются обновления в рамках одного компонента.
Про обновление компонент. Даже если обновляется один компонент, React должен получить новое дерево, сравнить со старым и обновить DOM.
Кажется, что оптимизировать этот момент можно сопоставив изменяемое значение с конкретной операцией над DOM.
Достичь этого можно глубже понимая свои шаблоны. Мы знаем, что у нас есть переменная "name" и что она выводится как текст у DOM ноды.
Имея это знание, можно составить список необходимых операций над DOM без сравнения двух деревьев.
Одни из тех, кто копает в эту сторону, это команда Ember в рамках проекта Glimmer 2. github.com/tildeio/glimmer
Обязательно посмотрите это видео про Glimmer 2! youtube.com/watch?v=vL8sCi…
Попробую кратко. Шаблон компилируется в промежуточное представление, "wire-format", который разбит на блоки (root, if, each, etc).
Каждый из блоков состоит из инструкций (открыт тег, задан аттрибут, закрыт тег, etc). Каждый из блоков знает о используемых переменных.
Из этого представления генерируются две подпрограммы. Первая для первоначальной отрисовки. Вторая для эффективного применения обновлений.
Подпрограммы представляют из себя дерево операций (опкодов), каждая операция привязана к части DOM дерева и к части дерева данных.
Дальше запускается виртуальная машина, которая эти опкоды выполняет. Переменная изменилась — меняем текст; нет — завершаем выполнение.