Panduan · 08

Performa dan pemutaran

Bagaimana Animated menghindari kerja per frame, cara memeriksa jalur yang dipakai elemen, dan bagaimana angka di beranda diukur.

Tiga jalur pemutaran

Animated memilih jalur per properti. API tidak berubah mengikuti jalurnya.

Jalur	Kapan	Kerja per frame
browser	Gerak transform dan opacity yang terbatas pada elemen `Animated.<tag>`, termasuk pegas	Tidak ada di JavaScript halaman
css	Kurva tepat yang dapat dinyatakan browser dengan keyframe CSS bersama	Tidak ada di JavaScript halaman
js	Variabel gaya biasa, input, perhitungan sendiri, dan batas sequence	Satu penulisan per nilai, tanpa render React

Satu nilai, banyak elemen

Turunan dari nilai hook adalah ekspresi calc(). Dengan scope, satu penulisan variabel per frame menggerakkan setiap elemen di dalam wadah.

Menyiapkan contoh…

JavaScript nonaktif. Kode di bawah adalah contoh lengkapnya.

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;
}

Periksa jalurnya

inspect(element) mengembalikan driver dan alasan fallback untuk setiap properti beranimasi selama eksekusi nyata.

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

Dimulai dari frame pertama

Saat tugas yang memulai gerak membuat thread utama sibuk, seperti hidrasi atau commit besar, gerak dimulai ulang setelah pekerjaan itu selesai alih-alih tampak sudah berjalan. Gerak yang dimulai di halaman tersembunyi selesai di latar belakang.

Cara angka di beranda diukur

Setiap skenario dijalankan di halaman baru setelah satu pemanasan, dengan tiga sampel terekam, dan yang dilaporkan adalah median. Waktu JavaScript adalah waktu yang dihabiskan di dalam callback animation-frame selama gerak berjalan. Ini tidak mencakup gaya, tata letak, dan paint yang dikerjakan browser untuk setiap pendekatan, jadi ini bukan ukuran total CPU atau frame rate.

Pemutaran oleh browser tidak membuat tata letak, paint, compositing, atau memori menjadi gratis. Ukur layar sesungguhnya di perangkat yang Anda dukung.

Skenario	Penyiapan	Hasil
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