Hướng dẫn · 08

Hiệu năng và cách phát

Cách Animated tránh công việc ở mỗi khung hình, cách kiểm tra phần tử dùng đường nào, và cách đo các con số trên trang chủ.

Ba đường phát

Animated chọn đường cho từng thuộc tính. API không đổi theo đường.

Đường	Khi nào	Công việc mỗi khung hình
browser	Chuyển động transform và opacity có giới hạn trên phần tử `Animated.<tag>`, kể cả lò xo	Không có trong JavaScript của trang
css	Đường cong chính xác mà trình duyệt biểu diễn được bằng keyframe CSS dùng chung	Không có trong JavaScript của trang
js	Biến style thông thường, đầu vào, phép tính riêng và ranh giới của sequence	Một lần ghi cho mỗi giá trị, không render React

Một giá trị, nhiều phần tử

Các giá trị suy ra từ giá trị hook là biểu thức calc(). Với scope, một lần ghi biến mỗi khung hình điều khiển mọi phần tử trong phần tử chứa.

Đang chuẩn bị ví dụ…

JavaScript đang tắt. Đoạn mã bên dưới là ví dụ đầy đủ.

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

Kiểm tra đường đi

inspect(element) trả về driver và lý do fallback cho từng thuộc tính có hoạt ảnh trong một lần chạy thật.

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

Bắt đầu từ khung hình đầu tiên

Khi tác vụ khởi động chuyển động làm luồng chính bận, như hydrate hay một commit lớn, chuyển động sẽ bắt đầu lại khi công việc đó xong thay vì trông như đã chạy được một đoạn. Chuyển động khởi động trên trang bị ẩn sẽ hoàn tất ở chế độ nền.

Cách đo các con số trên trang chủ

Mỗi kịch bản chạy trên một trang mới sau một lượt khởi động, với ba mẫu được ghi lại và báo giá trị trung vị. Thời gian JavaScript là thời gian nằm trong các callback animation-frame khi chuyển động đang chạy. Nó không gồm style, bố cục và vẽ, những việc trình duyệt làm với mọi cách tiếp cận, nên đây không phải thước đo tổng CPU hay tốc độ khung hình.

Phát bằng trình duyệt không khiến bố cục, vẽ, ghép lớp hay bộ nhớ trở nên miễn phí. Hãy đo màn hình thật trên các thiết bị bạn hỗ trợ.

Kịch bản	Thiết lập	Kết quả
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