Browser Internals: Bí mật 60fps Animations

Tại sao transform: translate(10px) mượt hơn left: 10px? Tại sao cuộn trang web trên iPhone mượt hơn Android giá rẻ? Câu trả lời nằm sâu trong GPU và Pixel Pipeline của trình duyệt.

1. Pixel Pipeline: Con đường của điểm ảnh

Mỗi khi bạn thay đổi UI, trình duyệt chạy quy trình 5 bước:

1. Javascript: Tính toán logic.
2. Style: Tính CSS.
3. Layout (Reflow): Tính kích thước, vị trí hình học. (Cực Đắt)
4. Paint: Tô màu pixels.
5. Composite: Xếp lớp và đẩy lên GPU. (Siêu Rẻ)

2. Quy tắc vàng 60fps: Only Composite

Để đạt animation 60fps (16ms/frame), bạn phải tìm mọi cách bỏ qua bước Layout và Paint.

• Bad: width, height, top, left, margin. (Kích hoạt Layout -> Paint -> Composite). Rất giật trên máy yếu.
• Good: transform, opacity. (Trình duyệt thông minh tách layer riêng và ném thẳng cho GPU xử lý).

Case Study: Sidebar trượt ra.

• Dùng width: 300px chuyển từ 0 -> 300: CPU phải tính layout từng frame. Quạt tản nhiệt quay vù vù.
• Dùng transform: translateX(0): GPU xử lý việc di chuyển texture. Mượt như lụa.

3. Layout Thrashing: Sự sỉ nhục của JS

Đây là cách nhanh nhất để giết chết hiệu năng trang web của bạn: Đọc và Ghi DOM liên tục.

// ❌ THẢM HỌA:
for (let i = 0; i < 100; i++) {
  // 1. Đọc (Read): Browser phải tính Layout ngay lập tức để trả về số chính xác
  const w = box.offsetWidth; 
  // 2. Ghi (Write): Làm bẩn Layout
  box.style.width = (w + 1) + 'px';
}
// Vòng lặp này ép Browser tính Layout 100 lần trong 1 frame!

Giải pháp: Batching (Gom lại). Đọc hết 1 lượt, rồi Ghi hết 1 lượt.

4. will-change: Lời thì thầm với GPU

Bạn có thể "gợi ý" cho trình duyệt biết sắp có animation nặng.

.card { will-change: transform; }

Trình duyệt sẽ chuẩn bị sẵn một lớp layer (Texture) riêng cho element đó, sẵn sàng để GPU quay/dịch chuyển nó. Lưu ý: Đừng lạm dụng. Mỗi layer tốn VRAM. Dùng nhiều quá sẽ crash tab trên điện thoại.

Kết luận

Để trở thành Master Performance, bạn không chỉ cần biết React Code, bạn cần hiểu "cảm giác" của trình duyệt. Hãy thương xót CPU và tận dụng sức mạnh GPU.