Understand the browser GPU Compositing architecture, minimize layout reflow and repaint cycles, employ will-change with care, and implement prefers-reduced-motion to accommodate users with vestibular disorders.

This lesson is currently only available in Vietnamese. Please switch the language toggle in the menu to Vietnamese to read the full guide and take the interactive quiz.

Khi viết CSS, chúng ta không chỉ hướng tới mục tiêu giao diện đẹp mắt mà còn phải đảm bảo hai yếu tố cực kỳ quan trọng: Hiệu năng mượt mà (Performance) đạt chuẩn 60fps/120fps và Khả năng truy cập (Accessibility - A11y) cho mọi đối tượng người dùng.

Trong bài này, chúng ta sẽ phân tích vòng đời dựng hình của trình duyệt (Browser Rendering Pipeline), cơ chế tăng tốc phần cứng qua GPU Compositing, cạm bẫy của thuộc tính will-change, và cách tối ưu chuyển động tôn trọng người bệnh rối loạn tiền đình bằng prefers-reduced-motion.

1. Vòng đời dựng hình và Tác động của thuộc tính CSS

Trình duyệt dựng giao diện trang web trải qua 5 giai đoạn tuần tự:

Mỗi thuộc tính CSS khi thay đổi sẽ kích hoạt các điểm mốc kết thúc khác nhau trong vòng đời này:

• Reflow (Layout): Bắt buộc trình duyệt tính toán lại kích thước và vị trí của các phần tử. Bất kỳ thuộc tính hình học nào như width, height, margin, padding, top, left, border đều kích hoạt Reflow. Phép tính này có độ phức tạp cao nhất ($O(N)$).
• Repaint: Không thay đổi kích thước nhưng cần vẽ lại màu sắc điểm ảnh. Các thuộc tính như color, background-color, box-shadow, visibility sẽ bỏ qua bước Layout nhưng vẫn kích hoạt Paint.
• Composite Only: Chỉ trộn các lớp đồ họa đã có lại với nhau trên GPU. Đây là trường hợp tối ưu nhất vì bỏ qua cả Layout lẫn Paint. Chỉ có 4 thuộc tính kích hoạt Composite trực tiếp: transform, opacity, filter, và will-change.

2. will-change — Con dao hai lưỡi

Thuộc tính will-change báo trước cho trình duyệt biết thuộc tính nào sắp thay đổi để trình duyệt đưa phần tử đó lên một lớp đồ họa riêng trước khi hoạt ảnh bắt đầu (Hardware Acceleration Layer).

.animated-box {
  /* Báo trước để GPU tối ưu sẵn bộ nhớ */
  will-change: transform;
}

3. Khả năng truy cập chuyển động (prefers-reduced-motion)

Hoạt ảnh chuyển động nhanh có thể gây chóng mặt, buồn nôn hoặc các cơn động kinh cho những người dùng bị rối loạn tiền đình (vestibular disorders).

CSS cung cấp truy vấn truyền thông prefers-reduced-motion để phát hiện xem hệ điều hành của người dùng có đang bật chế độ giảm hiệu ứng chuyển động hay không. Chúng ta nên viết rule vô hiệu hóa hoạt ảnh toàn cục như sau:

@media (prefers-reduced-motion: reduce) {
  /* Dừng hoặc rút ngắn toàn bộ thời lượng chuyển động */
  *, ::before, ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}

Sân chơi tương tác: Performance & Accessibility Lab

Sân chơi dưới đây mô phỏng sự khác biệt hiệu năng render giữa 2 kỹ thuật di chuyển phần tử. Bạn hãy đổi chế độ từ Reflow (left/top) sang Composite (transform) để thấy chỉ số FPS thực tế thay đổi rõ rệt, hoặc kích hoạt bộ lọc giảm hoạt ảnh:

<div class="dots-grid">
  <!-- 100 dot elements -->
  <div class="dot"></div>
  <div class="dot"></div>
</div>