מדריכים · 08

ביצועים וניגון

איך Animated נמנע מעבודה בכל פריים, איך לבדוק באיזה מסלול אלמנט משתמש, ואיך נמדדו המספרים בדף הבית.

שלושה מסלולי ניגון

Animated בוחר מסלול לכל מאפיין. ה־API לא משתנה עם המסלול.

מסלול	מתי	עבודה לפריים
browser	תנועה סופית של transform ו־opacity על אלמנטים של `Animated.<tag>`, כולל קפיצים	אין, ב־JavaScript של העמוד
css	עקומות מדויקות שהדפדפן יכול לבטא עם keyframes משותפים של CSS	אין, ב־JavaScript של העמוד
js	משתני style רגילים, קלט, חישובים מותאמים וגבולות של רצפים	כתיבה אחת לכל ערך, בלי רינדור React

ערך אחד, אלמנטים רבים

נגזרות של ערך hook הן ביטויי calc(). עם scope, כתיבת משתנה אחת לפריים מניעה כל אלמנט במכל.

מכין את הדוגמה…

JavaScript כבוי. הקוד שלמטה הוא הדוגמה המלאה.

App.jsx

import { useRef } from 'react';
import { Easing, loop, timing, useAnimated } from '@kkwaenggwari/animated';
import './styles.css';

export default function App({ count = 1600, amplitude = 16, duration = 2400 }) {
  const field = useRef(null);
  const renders = useRef(0);
  renders.current += 1;

  // Written once per frame on the field; every dot derives from it in CSS.
  const wave = useAnimated(
    0,
    (value) => {
      loop(timing(value, { toValue: 1, duration, easing: Easing.linear }));
    },
    [duration],
    { scope: field },
  );

  const columns = Math.ceil(Math.sqrt(count * 2.8));
  const dots = Array.from({ length: count }, (_, index) => index);

  return (
    <div className="stage">
      <div className="meta">
        <span>{count.toLocaleString('en-US')} dots</span>
        <span>React renders: {renders.current}</span>
      </div>
      <div className="field" ref={field} style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}>
        {dots.map((index) => {
          const phase = (index % columns) / columns + Math.floor(index / columns) / 18;
          return (
            <i
              key={index}
              style={{
                transform: `translateY(calc(sin((${wave} + ${phase}) * 1turn) * ${amplitude}px))`,
                opacity: `calc(0.55 + cos((${wave} + ${phase}) * 1turn) * 0.45)`,
              }}
            />
          );
        })}
      </div>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  gap: 16px;
  padding: 24px;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  font:
    600 14px/1.4 ui-monospace,
    SFMono-Regular,
    Consolas,
    monospace;
  color: #1a33c7;
}

.field {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 2px;
  height: 280px;
  padding: 28px 16px;
  border-radius: 16px;
  background: #0b1440;
  overflow: hidden;
}

.field i {
  display: block;
  width: 100%;
  max-width: 8px;
  aspect-ratio: 1;
  align-self: center;
  justify-self: center;
  border-radius: 50%;
  background: #5c7cff;
}

.field i:nth-child(3n) {
  background: #8fb0ff;
}

.field i:nth-child(7n) {
  background: #ffffff;
}

לבדוק את המסלול

inspect(element) מחזיר את ה־driver ואת סיבת ה־fallback לכל מאפיין מונפש במהלך ריצה אמיתית.

debug.js

import { inspect } from '@kkwaenggwari/animated';

console.table(inspect(element));
// property   driver     reason
// transform  browser    null
// opacity    css        null
// --level    js         css-variable-requires-js

מתחיל מהפריים הראשון

כשהמשימה שמתחילה תנועה מעסיקה את ה־main thread, כמו hydration או commit גדול, התנועה מתחילה מחדש כשהעבודה הזו נגמרת במקום להופיע כבר מתקדמת. התחלה בעמוד מוסתר מסתיימת ברקע.

איך נמדדו המספרים בדף הבית

כל תרחיש רץ בעמוד חדש אחרי חימום אחד, עם שלוש דגימות מוקלטות, ומדווח החציון. זמן JavaScript הוא הזמן בתוך callbacks של animation frame בזמן שהתנועה רצה. הוא לא כולל style, layout ו־paint, שהדפדפן מבצע בכל גישה, ולכן אינו מדד ל־CPU כולל או לקצב פריימים.

ניגון בדפדפן לא הופך את layout, paint, compositing והזיכרון לחינמיים. מדדו את המסך האמיתי על המכשירים שאתם תומכים בהם.

תרחיש	הגדרה	תוצאה
400 Animated.div elements move translateX and fade in (timing, 1800 ms)	seed/pose/tempo on Animated.div; 800 browser animations	0.00 ms
One useAnimated value drives 10,000 elements in ordinary style (loop, 1200 ms)	transform and opacity as calc() of one CSS variable written on a scope element	0.13 ms

2026-09-28 · Chrome 153.0.8010.52 (headless) · Windows_NT x64 · Intel(R) Core(TM) i7-14700K