Angular: рендеринг и компиляция
Incremental DOM vs Virtual DOM
Virtual DOM (React, Vue) создаёт всё дерево заново при каждом повторном рендеринге и сравнивает его с предыдущим.
Incremental DOM (Angular Ivy) — каждый компонент компилируется в набор инструкций, которые создают и обновляют DOM. Цели: хорошая производительность на мобильных, оптимизация размера бандла и потребления памяти.
Как это достигается:
- движок рендеринга tree-shakable — в бандл попадают только используемые инструкции;
- движок не потребляет много памяти — Incremental DOM не требует памяти для повторного рендеринга, если изменений в DOM нет (в отличие от Virtual DOM, который каждый раз строит дерево с нуля).
AOT vs JIT
| JIT (Just-in-Time) | AOT (Ahead-of-Time) | |
|---|---|---|
| Когда компилируется | в браузере, во время выполнения | на этапе сборки |
| Как | каждый файл отдельно | весь код вместе, HTML/CSS инлайнятся в скрипты |
| Компилятор в бандле | нужен | не нужен (≈половина размера Angular) |
| Скорость запуска | медленнее | быстрее |
| Шаблоны | HTML-строки компилируются в браузере | скомпилированы заранее, компилятор и исходные шаблоны не входят в бандл |
| Назначение | локальная разработка | production-сборки |