Bạn đã bao giờ thấy trang web bị giật lag khi cuộn (scroll) hoặc khi có các hiệu ứng animation? Đó là do mã CSS của bạn đang làm “khó” trình duyệt. Để đạt được tốc độ 60 khung hình/giây (FPS), bạn cần nắm vững quy trình Rendering Pipeline.
#1. 5 Giai đoạn của quy trình Rendering
Mỗi khi màn hình thay đổi, trình duyệt trải qua 5 bước:
- JavaScript: Xử lý các thay đổi logic.
- Style: Tính toán các thuộc tính CSS áp dụng cho mỗi phần tử.
- Layout (Reflow): Tính toán vị trí và kích thước của mỗi phần tử (ví dụ:
width,top,left). - Paint (Repaint): Đổ màu, vẽ text, vẽ viền, đổ bóng…
- Composite: Gộp các lớp (layers) lại với nhau để hiển thị lên màn hình.
#2. Kẻ thù của hiệu suất: Reflow và Repaint
#2.1 Reflow (Layout)
Xảy ra khi bạn thay đổi các thuộc tính hình học. Khi một phần tử Reflow, toàn bộ các phần tử xung quanh và cha của nó cũng có thể bị tính toán lại. Đây là thao tác đắt đỏ nhất.
Ví dụ: Thay đổi width, height, margin, padding.
#2.2 Repaint
Xảy ra khi bạn thay đổi các thuộc tính không làm ảnh hưởng đến bố cục. Nhẹ hơn Reflow nhưng vẫn tốn tài nguyên.
Ví dụ: Thay đổi color, background-color, visibility.
#3. Bí thuật: GPU Acceleration (Composite)
Nếu bạn thay đổi các thuộc tính mà trình duyệt có thể xử lý ở bước Composite, nó sẽ không cần Reflow hay Repaint. Bước này được xử lý bởi GPU, cực kỳ nhanh.
Các thuộc tính “vàng”: transform và opacity.
#4.Câu hỏi nhanh
Câu hỏi: Tại sao chúng ta nên ưu tiên sử dụng transform: translateX(10px) thay vì left: 10px để làm animation di chuyển?
Trả lời:
- Khi dùng
left, trình duyệt buộc phải chạy lại giai đoạn Layout (Reflow) vì vị trí hình học của phần tử thay đổi. Reflow sẽ làm CPU hoạt động nặng và có thể gây giật khung hình. - Khi dùng
transform, trình duyệt coi phần tử đó như một lớp riêng biệt và chỉ việc di chuyển lớp đó ở giai đoạn Composite. Toàn bộ quá trình này được đẩy cho GPU xử lý, không gây ra Reflow hay Repaint ở Main Thread, giúp animation mượt mà 60 FPS.
Câu hỏi mẹo: “Will-change” dùng để làm gì và có nên dùng nó cho tất cả các phần tử không?
Trả lời: will-change báo trước cho trình duyệt biết phần tử nào sắp thay đổi để nó chuẩn bị sẵn tài nguyên (tạo lớp riêng). Chỉ nên dùng cho các phần tử thực sự cần animation mượt. Lạm dụng nó sẽ khiến trình duyệt tiêu tốn quá nhiều bộ nhớ (VRAM) cho các lớp không cần thiết, dẫn đến phản tác dụng.
#5. Kết luận
Tối ưu CSS không chỉ là viết ngắn gọn, mà là hiểu cách trình duyệt xử lý từng dòng code đó. Hãy luôn sử dụng DevTools (Performance tab) để soi xem mã của bạn có đang gây ra quá nhiều Reflow không nhé!