গাইড · 03
পারফরম্যান্স
ওয়েব কম্পোনেন্টের খরচ, এই বিল্ডে মাপা, আর সংখ্যাগুলো কীভাবে আবার পাবেন।
মাপ
2026-09-28 তারিখে Chrome 153.0.8010.52 (headless, Playwright) দিয়ে মাপা। ব্রাউজারের প্রতিটি সংখ্যা তিনবার চালানোর মধ্যে সবচেয়ে বড়।
| কী | কীভাবে মাপা হয় | ফলাফল |
|---|---|---|
| প্যাকেজের আকার | পুরো ওয়েব এন্ট্রি (১৬টি এক্সপোর্ট) 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