गाइड · 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 फ़्रेम callback | 1.2 s तक पेज पर requestAnimationFrame कॉल, जबकि MotionNumber, MotionHeight और MotionHighlight साथ बदलते हैं (12 एनिमेशन चल रहे) | 0 |
| हर बदलाव पर React commit | 10 मान बदलावों के लिए MotionNumber के आसपास Profiler commit, हर एक को पूरा होने दिया गया | 10 बदलावों के लिए 10 |
| स्ट्रीमिंग | एक साथ आए 3000 अक्षरों को MotionStream के दिखाते समय Profiler commit (लगभग 4081 ms) | 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 को सौंपी जाती है, स्प्रिंग विश्लेषणात्मक रूप से सैंपल होते हैं।
- हर फ़्रेम में React रेंडर नहीं: कंपोनेंट आपका डेटा बदलने पर रेंडर होते हैं, हिलते समय नहीं।
- स्ट्रीम टेक्स्ट सीधे पेज में जोड़ा जाता है और हर सेकंड सिर्फ़ कुछ बार React स्टेट में मिलाया जाता है।
- हर कंपोनेंट अकेला खड़ा है: न ट्री को दोबारा रेंडर करने वाला provider है, न ग्लोबल स्टोर।
सीमाएँ
MotionStream टेक्स्ट दिखाते समय animation frame लूप इस्तेमाल करता है; यही एक कंपोनेंट है जिसे हर फ़्रेम में काम चाहिए। React Native में चौड़ाई और ऊँचाई के बदलाव JS driver पर चलते हैं क्योंकि वे लेआउट हैं। माप एक मशीन और एक ब्राउज़र का वर्णन करते हैं, इसलिए आपके आँकड़े अलग होंगे।
दोबारा पाएँ
आँकड़े वेबसाइट रिपॉज़िटरी की एक स्क्रिप्ट से आते हैं। वह पैकेज बंडल करती है, इंस्टॉल किया हुआ Chrome बिना विंडो के खोलती है, हर परिदृश्य तीन बार चलाती है और यह पेज जो परिणाम पढ़ता है वे लिखती है।
node scripts/measure-chorus.mjs