מדריכים · 03
ביצועים
כמה עולים רכיבי האינטרנט, כפי שנמדד על הבנייה הזו, ואיך לשחזר את המספרים.
מדידות
נמדד ב־2026-09-28 עם Chrome 153.0.8010.52 (headless, Playwright). כל נתון דפדפן הוא הגבוה מבין שלוש ריצות.
| מה | איך זה נמדד | תוצאה |
|---|---|---|
| גודל החבילה | כל נקודת הכניסה לאינטרנט (כל 16 ה־exports) ארוזה ומוקטנת עם esbuild, React חיצוני, gzip ברמה 9 | 28.0 KB (84.3 KB מוקטן) |
| רכיב אחד | מיובא רק MotionNumber, אותה אריזה | 18.6 KB |
| callbacks של פריים ב־JS | קריאות ל־requestAnimationFrame בעמוד במשך 1.2 s בזמן ש־MotionNumber, MotionHeight ו־MotionHighlight משתנים יחד (12 אנימציות רצות) | 0 |
| commits של React לכל שינוי | commits של Profiler סביב MotionNumber עבור 10 שינויי ערך, כל אחד הושאר להסתיים | 10 עבור 10 שינויים |
| זרימה | commits של 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 שינויי רוחב וגובה רצים על ה־driver של JS כי הם פריסה. המדידות מתארות מכונה אחת ודפדפן אחד, כך שהמספרים שלכם יהיו שונים.
שחזור
הנתונים מגיעים מסקריפט במאגר הקוד של האתר. הוא אורז את החבילה, פותח את Chrome המותקן בלי חלון, מריץ כל תרחיש שלוש פעמים וכותב את התוצאות שהעמוד הזה קורא.
node scripts/measure-chorus.mjs