Một số ảnh động trên trang web có thể được xử lý hoàn toàn trong giai đoạn trình kết hợp của quy trình kết xuất.
Ảnh động không kết hợp đòi hỏi nhiều công sức hơn và có thể xuất hiện giật (không mượt mà) trên điện thoại cấp thấp hoặc khi các tác vụ nặng về hiệu suất đang chạy trên luồng chính.
Ảnh động không kết hợp cũng có thể làm tăng Sự dịch chuyển bố cục tích luỹ (CLS) của trang vì ảnh động này dẫn đến sự di chuyển thực tế của các phần tử mà thuật toán CLS đo lường, điều này có thể gây ra sự dịch chuyển cho các phần tử khác. Ảnh động tổng hợp sẽ không làm các phần tử khác dịch chuyển và do đó sẽ bị loại trừ khỏi CLS. Việc giảm CLS sẽ cải thiện điểm Hiệu suất của Lighthouse.
Thông tin khái quát
Các thuật toán của trình duyệt để chuyển đổi HTML, CSS và JavaScript thành pixel được gọi chung là quy trình kết xuất.
Bạn không cần phải hiểu ý nghĩa của từng bước trong quy trình kết xuất. Điều quan trọng cần hiểu ngay bây giờ là ở mỗi bước của quy trình kết xuất, trình duyệt sử dụng kết quả của thao tác trước đó để tạo dữ liệu mới. Ví dụ: nếu mã của bạn thực hiện một thao tác nào đó kích hoạt bố cục, thì các bước Vẽ và Kết hợp cần chạy lại. Ảnh động không kết hợp là bất kỳ ảnh động nào kích hoạt một trong các bước trước đó trong quy trình kết xuất (Kiểu, Bố cục hoặc Vẽ). Ảnh động không kết hợp hoạt động kém hơn vì buộc trình duyệt phải làm nhiều việc hơn.
Hãy xem các tài nguyên sau để tìm hiểu sâu về quy trình kết xuất:
- Tìm hiểu về các trình duyệt web hiện đại (phần 3)
- Đơn giản hoá độ phức tạp của quá trình vẽ và giảm diện tích vẽ
- Chỉ sử dụng các thuộc tính dành riêng cho trình kết hợp và quản lý số lượng lớp
Cách Lighthouse phát hiện ảnh động không được kết hợp
Khi không thể kết hợp ảnh động, Chrome sẽ báo cáo lý do không thành công cho dấu vết DevTools. Đây là nội dung mà Lighthouse đọc được. Lighthouse liệt kê các nút DOM có ảnh động không được kết hợp cùng với(các) lý do không thành công cho mỗi ảnh động.
Cách đảm bảo ảnh động được kết hợp
Xem phần Chỉ sử dụng các thuộc tính dành riêng cho trình kết hợp và quản lý số lượng lớp và Ảnh động hiệu suất cao.