Руководства · 03
Производительность
Во что обходятся веб-компоненты, измеренные на этой сборке, и как воспроизвести цифры.
Измерения
Измерено 2026-09-28 с Chrome 153.0.8010.52 (headless, Playwright). Каждый показатель браузера — наибольший из трёх запусков.
| Что | Как измеряется | Результат |
|---|---|---|
| Размер пакета | Вся веб-точка входа (все 16 экспортов), собранная и минифицированная esbuild, React внешний, gzip уровня 9 | 28.0 KB (84.3 KB в минифицированном виде) |
| Один компонент | Импортирован только MotionNumber, та же сборка | 18.6 KB |
| Колбэки кадров JS | Вызовы requestAnimationFrame на странице за 1,2 с, пока MotionNumber, MotionHeight и MotionHighlight меняются вместе (идут 12 анимации) | 0 |
| Коммиты React на изменение | Коммиты Profiler вокруг MotionNumber за 10 изменений значения, каждое доведено до конца | 10 на 10 изменений |
| Потоковый вывод | Коммиты Profiler, пока MotionStream раскрывает 3000 символов, пришедших разом (около 4081 мс) | 11 |
| Прерывания | 200 новых значений с интервалом 5 мс, затем пауза: сколько анимаций осталось на странице и точен ли итоговый текст | Осталось: 0, текст точен |
2026-09-28 · @kkwaenggwari/animated-chorus@0.1.0 · Chrome 153.0.8010.52 (headless, Playwright) · Windows_NT 10.0.22631 · Intel(R) Core(TM) i7-14700K
Почему это быстро
Четыре проектных решения держат стоимость низкой.
- Никакой библиотеки анимации в вебе: движение передаётся Web Animations API браузера, а пружины рассчитываются аналитически.
- Никакого рендера React на каждый кадр: компоненты перерисовываются, когда меняются ваши данные, а не пока они движутся.
- Потоковый текст добавляется на страницу напрямую и попадает в состояние React лишь несколько раз в секунду.
- Каждый компонент самостоятелен: нет provider, перерисовывающего дерево, и нет глобального хранилища.
Ограничения
MotionStream использует цикл animation frame, пока раскрывает текст; это единственный компонент, которому нужна работа на каждом кадре. В React Native изменения ширины и высоты идут на драйвере JS, потому что это раскладка. Измерения описывают одну машину и один браузер, поэтому ваши цифры будут отличаться.
Воспроизведение
Цифры получены скриптом в репозитории сайта. Он собирает пакет, открывает установленный Chrome без окна, запускает каждый сценарий три раза и записывает результаты, которые читает эта страница.
node scripts/measure-chorus.mjs