الأدلة · 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 | استدعاءات requestAnimationFrame في الصفحة خلال 1.2 s بينما تتغيّر MotionNumber وMotionHeight وMotionHighlight معًا (12 حركات تعمل) | 0 |
| اعتمادات React لكل تغيير | اعتمادات Profiler حول MotionNumber لـ 10 تغييرات في القيمة، كل منها تُرك حتى ينتهي | 10 لـ 10 تغييرات |
| التدفق | اعتمادات 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 يعيد عرض الشجرة ولا مخزن عام.
الحدود
يستخدم MotionStream حلقة animation frame أثناء كشف النص؛ وهو المكوّن الوحيد الذي يحتاج إلى عمل في كل إطار. في React Native تعمل تغيّرات العرض والارتفاع على مشغّل JS لأنها تخطيط. تصف القياسات جهازًا واحدًا ومتصفحًا واحدًا، فستختلف أرقامك.
إعادة الإنتاج
تأتي الأرقام من سكربت في مستودع الموقع. يحزم الحزمة، ويفتح Chrome المثبّت من دون نافذة، ويشغّل كل سيناريو ثلاث مرات، ويكتب النتائج التي تقرؤها هذه الصفحة.
node scripts/measure-chorus.mjs