ಮಾರ್ಗದರ್ಶಿಗಳು · 08

ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ಪ್ಲೇಬ್ಯಾಕ್

Animated ಪ್ರತಿ ಫ್ರೇಮ್‌ನ ಕೆಲಸವನ್ನು ಹೇಗೆ ತಪ್ಪಿಸುತ್ತದೆ, ಎಲಿಮೆಂಟ್ ಯಾವ ಮಾರ್ಗ ಬಳಸುತ್ತದೆ ಹೇಗೆ ಪರಿಶೀಲಿಸುವುದು, ಮತ್ತು ಮುಖಪುಟದ ಸಂಖ್ಯೆಗಳನ್ನು ಹೇಗೆ ಅಳೆಯಲಾಯಿತು.

ಮೂರು ಪ್ಲೇಬ್ಯಾಕ್ ಮಾರ್ಗಗಳು

Animated ಪ್ರತಿ ಗುಣಲಕ್ಷಣಕ್ಕೆ ಒಂದು ಮಾರ್ಗ ಆರಿಸುತ್ತದೆ. ಮಾರ್ಗದೊಂದಿಗೆ API ಬದಲಾಗುವುದಿಲ್ಲ.

ಮಾರ್ಗ	ಯಾವಾಗ	ಪ್ರತಿ ಫ್ರೇಮ್‌ನ ಕೆಲಸ
browser	`Animated.<tag>` ಎಲಿಮೆಂಟ್‌ಗಳ ಮೇಲಿನ ಸೀಮಿತ transform ಮತ್ತು opacity ಮೋಷನ್, spring ಗಳು ಸೇರಿ	ಪುಟದ JavaScript ನಲ್ಲಿ ಏನೂ ಇಲ್ಲ
css	ಹಂಚಿಕೊಂಡ CSS keyframes ನಿಂದ ಬ್ರೌಸರ್ ವ್ಯಕ್ತಪಡಿಸಬಲ್ಲ ನಿಖರ ವಕ್ರಗಳು	ಪುಟದ JavaScript ನಲ್ಲಿ ಏನೂ ಇಲ್ಲ
js	ಸಾಮಾನ್ಯ style ವೇರಿಯಬಲ್‌ಗಳು, ಇನ್‌ಪುಟ್, ಕಸ್ಟಮ್ ಲೆಕ್ಕಾಚಾರ ಮತ್ತು sequence ಗಡಿಗಳು	ಪ್ರತಿ ಮೌಲ್ಯಕ್ಕೆ ಒಂದು ಬರಹ, React ರೆಂಡರ್ ಇಲ್ಲ

ಒಂದು ಮೌಲ್ಯ, ಅನೇಕ ಎಲಿಮೆಂಟ್‌ಗಳು

ಹುಕ್ ಮೌಲ್ಯದ ವ್ಯುತ್ಪನ್ನಗಳು 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

ಮೊದಲ ಫ್ರೇಮ್‌ನಿಂದಲೇ ಆರಂಭ

ಮೋಷನ್ ಆರಂಭಿಸುವ ಕೆಲಸ — hydration ಅಥವಾ ದೊಡ್ಡ commit ನಂತಹುದು — main thread ಅನ್ನು ಕಾರ್ಯನಿರತವಾಗಿಟ್ಟಾಗ, ಈಗಾಗಲೇ ಮುಂದೆ ಹೋದಂತೆ ಕಾಣದೆ, ಆ ಕೆಲಸ ಮುಗಿದ ನಂತರ ಮೋಷನ್ ಮರುಆರಂಭವಾಗುತ್ತದೆ. ಮರೆಯಾದ ಪುಟದಲ್ಲಿ ಆರಂಭವಾದುದು ಹಿನ್ನೆಲೆಯಲ್ಲಿ ಮುಗಿಯುತ್ತದೆ.

ಮುಖಪುಟದ ಸಂಖ್ಯೆಗಳನ್ನು ಹೇಗೆ ಅಳೆಯಲಾಯಿತು

ಪ್ರತಿ ಸನ್ನಿವೇಶವನ್ನು ಒಂದು ವಾರ್ಮ್-ಅಪ್ ನಂತರ ಹೊಸ ಪುಟದಲ್ಲಿ ನಡೆಸಲಾಯಿತು; ಮೂರು ಮಾದರಿಗಳನ್ನು ದಾಖಲಿಸಿ ಮಧ್ಯಮ ಮೌಲ್ಯ ವರದಿ ಮಾಡಲಾಯಿತು. JavaScript ಸಮಯ ಎಂದರೆ ಮೋಷನ್ ನಡೆಯುವಾಗ animation-frame callback ಗಳ ಒಳಗೆ ಕಳೆದ ಸಮಯ. ಪ್ರತಿ ವಿಧಾನಕ್ಕೂ ಬ್ರೌಸರ್ ಮಾಡುವ 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