Посібники · 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