வழிகாட்டிகள் · 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