Ảnh động không được ghép có thể xuất hiện hiện tượng giật (không mượt mà) trên các đ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 bị giật có thể làm tăng Điểm số tổng hợp về mức thay đổi bố cục (CLS) của trang. Việc giảm CLS sẽ cải thiện điểm hiệu suất Lighthouse của bạn.
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 hiển thị.
Nếu bạn không hiểu ý nghĩa của từng bước trong quy trình kết xuất thì cũng không sao. Điều quan trọng cần hiểu ngay bây giờ là ở mỗi bước trong quy trình kết xuất, trình duyệt sẽ 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 tác vụ nào đó kích hoạt Bố cục, thì các bước Vẽ và Kết hợp cần phải chạy lại. Ảnh động không được ghé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 Sơn). Ảnh động không được kết hợp sẽ hoạt động kém hơn vì chúng buộc trình duyệt làm nhiều việc hơn.
Hãy xem các tài nguyên sau đây để tìm hiểu chi tiết về quy trình kết xuất:
- Tìm hiểu về trình duyệt web hiện đại (phần 3)
- Đơn giản hoá độ phức tạp của sơn và giảm diện tích sơn
- Gắn vào các thuộc tính chỉ dành 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 ghép
Khi không thể kết hợp một ảnh động, Chrome sẽ báo cáo lý do lỗi cho dấu vết Công cụ cho nhà phát triển, đó là nội dung của Lighthouse. 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 lỗi cho từng ảnh động.
Cách đảm bảo ảnh động được kết hợp
Xem phần Gắn vào thuộc tính chỉ dành cho trình kết hợp và quản lý số lượng lớp cũng như Ảnh động hiệu suất cao.