Stencil изначально проектировался как компилятор, а не как
рантайм-фреймворк. Это принципиально влияет на подход к
производительности и, как следствие, к бенчмаркам. Основная нагрузка
переносится на этап сборки, а итоговый код представляет собой нативные
Web Components без дополнительного абстрактного слоя.
Ключевые архитектурные особенности, напрямую влияющие на
показатели:
- Отсутствие виртуального DOM — обновления
выполняются через компилируемые инструкции.
- Ленивая загрузка компонентов — каждый компонент
становится отдельным чанком.
- Статический анализ — компилятор заранее определяет
зависимости, свойства и события.
- Минимальный рантайм — общий runtime Stencil весит
считанные килобайты.
Все бенчмарки Stencil необходимо рассматривать с учётом того, что он
не является классическим SPA-фреймворком.
Типы бенчмарков в контексте
Stencil
Бандл-бенчмарки (Bundle Size)
Один из основных показателей — итоговый размер JavaScript,
загружаемого в браузер.
Оцениваются:
- размер initial bundle;
- размер чанков компонентов;
- влияние tree-shaking;
- наличие полифиллов.
Stencil компилирует каждый компонент в отдельный ES-модуль. Это
приводит к следующим наблюдениям:
- Initial bundle минимален, так как не содержит
компонентов;
- Компоненты загружаются по требованию, даже если
используются внутри других компонентов;
- Unused components полностью исключаются из
сборки.
В типичном проекте:
- runtime Stencil: ~6–8 KB (gzip);
- один компонент: ~1–3 KB (gzip);
- отсутствие глобального фреймворк-бандла.
Время инициализации (Startup
Time)
Startup time измеряет время от загрузки страницы до момента, когда
компоненты становятся интерактивными.
Stencil оптимизирует этот этап за счёт:
- асинхронной инициализации компонентов;
- регистрации custom elements без немедленного выполнения логики;
- deferred hydration.
Показатели:
- регистрация custom elements происходит почти мгновенно;
- логика компонента активируется только при появлении в DOM;
- гидрация может быть отложена до user interaction.
В сравнительных бенчмарках:
- Stencil показывает более низкий startup time на страницах с большим
количеством компонентов;
- при серверном рендеринге время до first paint сокращается
существенно.
Рендеринг и обновление
состояния
Initial Render
Initial render в Stencil выполняется через сгенерированные
инструкции, а не через diffing дерева.
Особенности:
- JSX компилируется в прямые DOM-операции;
- отсутствует runtime-сравнение состояний;
- создаётся минимальное количество DOM-узлов.
Результат:
- быстрый initial render;
- низкое потребление памяти;
- предсказуемое время выполнения.
Re-render и обновления
Stencil использует реактивную модель, основанную на отслеживании
изменений свойств (@Prop, @State).
Бенчмарки обновлений показывают:
- обновляется только компонент, в котором изменилось состояние;
- дочерние компоненты не перерисовываются без необходимости;
- отсутствует каскадное обновление дерева.
Механизмы оптимизации:
- батчинг обновлений через microtasks;
- предотвращение синхронных reflow;
- автоматическое объединение изменений в один render-цикл.
Массовые сценарии и
стресс-тесты
Тысячи компонентов на
странице
Один из типичных стресс-тестов — рендеринг тысяч однотипных
компонентов.
Stencil показывает устойчивые результаты благодаря:
- отсутствию центрального контроллера состояния;
- независимой жизни каждого компонента;
- ленивой инициализации логики.
Наблюдаемые эффекты:
- линейный рост времени рендера;
- отсутствие экспоненциального ухудшения;
- стабильное потребление памяти.
Частые обновления состояния
При тестировании сценариев с высокой частотой обновлений:
- анимации;
- таймеры;
- real-time данные.
Stencil выигрывает за счёт:
- минимального количества операций при каждом обновлении;
- отсутствия глобального reconciliation;
- прямого доступа к DOM-узлам.
Бенчмарки в сравнении
с другими подходами
Stencil vs Virtual DOM
Frameworks
В сравнительных тестах с React/Vue (без SSR):
- меньший bundle size;
- более быстрый startup;
- сопоставимая скорость обновлений при малом дереве;
- преимущество при большом количестве компонентов.
Stencil проигрывает:
- в сценариях с частыми глубокими обновлениями вложенных
структур;
- при использовании сложной вычислительной логики в render.
Stencil vs Vanilla Web
Components
По сравнению с ручной реализацией Web Components:
- Stencil добавляет минимальный overhead;
- компиляция JSX быстрее ручного шаблонирования;
- управление состоянием дешевле по коду, но сопоставимо по
производительности.
В бенчмарках:
- runtime overhead Stencil практически неотличим от чистого Custom
Elements API;
- выигрыш в developer productivity не сопровождается потерей
производительности.
SSR и гидрация
Серверный рендеринг
Stencil поддерживает генерацию HTML на сервере без рантайма.
Преимущества для бенчмарков:
- zero-JS initial render;
- мгновенный first contentful paint;
- гидрация только интерактивных частей.
Гидрация
Stencil использует selective hydration:
- только компоненты с логикой проходят гидрацию;
- статические части DOM не затрагиваются;
- вложенные компоненты гидратируются независимо.
Это снижает:
- время до интерактивности;
- нагрузку на main thread;
- потребление памяти при старте.
Инструменты измерения и
методики
Для корректных бенчмарков Stencil применяются:
- Lighthouse (TTI, FCP, JS execution);
- WebPageTest;
- Chrome Performance Profiler;
- Custom benchmarks через
performance.mark.
Важно учитывать:
- холодный и тёплый кеш;
- влияние полифиллов для legacy браузеров;
- различие между dev и prod сборками.
Влияние компилятора на
результаты
Stencil компилятор выполняет:
- удаление неиспользуемых watcher’ов;
- агрессивный tree-shaking;
- оптимизацию JSX;
- inlining простых функций.
Бенчмарки всегда должны проводиться:
- только на production-сборке;
- с включённым minify;
- без dev-флагов.
Dev-режим Stencil не отражает реальную производительность и
используется исключительно для отладки.
Практические выводы из
бенчмарков
Stencil демонстрирует сильные стороны в сценариях:
- дизайн-системы;
- UI-библиотеки;
- микрофронтенды;
- встраиваемые виджеты;
- проекты с длительным жизненным циклом страницы.
Производительность определяется не только цифрами, но и
архитектурными решениями, где Stencil минимизирует runtime-стоимость за
счёт компиляции, изоляции компонентов и строгой реактивной модели.