Ръководства · 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 |
| Callback-и за кадри на JS | Извиквания на requestAnimationFrame на страницата за 1,2 s, докато MotionNumber, MotionHeight и MotionHighlight се променят заедно (12 анимации вървят) | 0 |
| Commit-и на React на промяна | Commit-и на Profiler около MotionNumber за 10 промени на стойността, всяка оставена да приключи | 10 за 10 промени |
| Поточно предаване | Commit-и на Profiler, докато MotionStream разкрива 3000 знака, пристигнали наведнъж (около 4081 ms) | 11 |
| Прекъсвания | 200 нови стойности през 5 ms, после пауза: колко анимации са останали на страницата и дали крайният текст е точен | Остават 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, който пререндерира дървото, и няма глобален store.
Ограничения
MotionStream използва цикъл на animation frame, докато разкрива текст; това е единственият компонент, който изисква работа на всеки кадър. В React Native промените на ширина и височина вървят на JS драйвера, защото са оформление. Измерванията описват една машина и един браузър, така че вашите числа ще се различават.
Възпроизвеждане
Числата идват от скрипт в хранилището на сайта. Той пакетира пакета, отваря инсталирания Chrome без прозорец, изпълнява всеки сценарий три пъти и записва резултатите, които тази страница чете.
node scripts/measure-chorus.mjs