గైడ్‌లు · 03
పనితీరు
వెబ్ కాంపోనెంట్ల ఖర్చు, ఈ buildలో కొలవబడింది, సంఖ్యలను ఎలా పునరుత్పత్తి చేయాలి.
కొలతలు
2026-09-28 న Chrome 153.0.8010.52 (headless, Playwright)తో కొలవబడింది. ప్రతి బ్రౌజర్ సంఖ్య మూడు రన్‌లలో అతిపెద్దది.
| ఏమిటి | ఎలా కొలవబడుతుంది | ఫలితం |
|---|---|---|
| ప్యాకేజీ పరిమాణం | మొత్తం వెబ్ ఎంట్రీ (మొత్తం 16 export-లు) esbuildతో bundle చేసి minify చేయబడింది, React external, gzip స్థాయి 9 | 28.0 KB (84.3 KB minify చేయబడింది) |
| ఒక కాంపోనెంట్ | MotionNumber మాత్రమే import చేయబడింది, అదే bundling | 18.6 KB |
| JS frame callback-లు | MotionNumber, MotionHeight, MotionHighlight కలిసి మారుతున్నప్పుడు (12 యానిమేషన్లు నడుస్తున్నాయి) 1.2 సెకన్ల పాటు పేజీలో requestAnimationFrame కాల్‌లు | 0 |
| మార్పుకు React commit-లు | 10 విలువ మార్పుల కోసం, ప్రతిదీ ముగిసేలా వదిలి, MotionNumber చుట్టూ Profiler commit-లు | 10 మార్పులకు 10 |
| స్ట్రీమింగ్ | ఒకేసారి వచ్చిన 3000 అక్షరాలను MotionStream బయటపెడుతున్నప్పుడు (సుమారు 4081 ms) Profiler commit-లు | 11 |
| అంతరాయాలు | 5 ms వ్యవధిలో 200 కొత్త విలువలు, తర్వాత విరామం: పేజీలో మిగిలిన యానిమేషన్లు, చివరి టెక్స్ట్ ఖచ్చితమైనదా లేదా | 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-కి, విశ్లేషణాత్మకంగా నమూనా చేసిన spring-లతో అప్పగించబడుతుంది.
- ఫ్రేమ్‌కు React రెండర్ లేదు: కాంపోనెంట్లు కదులుతున్నప్పుడు కాదు, మీ డేటా మారినప్పుడు రెండర్ అవుతాయి.
- స్ట్రీమ్ టెక్స్ట్ నేరుగా పేజీకి జోడించబడి, సెకనుకు కొన్నిసార్లు మాత్రమే React state-లో కలుపబడుతుంది.
- ప్రతి కాంపోనెంట్ స్వతంత్రంగా నిలుస్తుంది: ట్రీని మళ్లీ రెండర్ చేసే Provider గానీ గ్లోబల్ store గానీ లేదు.
పరిమితులు
MotionStream టెక్స్ట్‌ను బయటపెడుతున్నప్పుడు animation frame లూప్ వాడుతుంది; ప్రతి ఫ్రేమ్‌లో పని అవసరమైన ఏకైక కాంపోనెంట్ ఇదే. React Native-లో వెడల్పు, ఎత్తు మార్పులు లేఅవుట్ కాబట్టి JS driverపై నడుస్తాయి. కొలతలు ఒక యంత్రాన్ని, ఒక బ్రౌజర్‌ను వివరిస్తాయి; అందువల్ల మీ సంఖ్యలు భిన్నంగా ఉంటాయి.
పునరుత్పత్తి
సంఖ్యలు వెబ్‌సైట్ రిపోజిటరీలోని ఒక script నుండి వస్తాయి. అది ప్యాకేజీని bundle చేసి, ఇన్‌స్టాల్ అయిన Chromeను విండో లేకుండా తెరిచి, ప్రతి సందర్భాన్ని మూడుసార్లు నడిపి, ఈ పేజీ చదివే ఫలితాలను రాస్తుంది.
node scripts/measure-chorus.mjs