Tuân thủ các thuộc tính chỉ dành cho trình tổng hợp và quản lý số lượng lớp

Kết hợp là khi các phần được vẽ của trang được tập hợp lại với nhau để hiển thị trên màn hình.

Paul Lewis

Kết hợp là khi các phần được sơn của trang được tập hợp lại để hiển thị trên màn hình.

Có 2 yếu tố chính trong khu vực này ảnh hưởng đến hiệu suất của trang: số lượng lớp tổng hợp cần được quản lý và các thuộc tính mà bạn sử dụng cho ảnh động.

Tóm tắt

• Duy trì các thay đổi biến đổi và độ mờ cho ảnh động của bạn.
• Quảng bá các phần tử chuyển động bằng will-change hoặc translateZ.
• Tránh lạm dụng quy tắc kết quả được thăng hạng; các lớp đòi hỏi bộ nhớ và quản lý.

Sử dụng các thay đổi biến đổi và độ mờ cho ảnh động

Phiên bản hoạt động tốt nhất của quy trình pixel tránh được cả bố cục lẫn màu vẽ, đồng thời chỉ yêu cầu kết hợp các thay đổi:

Để làm được điều này, bạn cần duy trì các thuộc tính thay đổi mà chỉ trình tổng hợp mới có thể xử lý. Hiện nay, chỉ có hai thuộc tính đúng – transform và opacity:

Lưu ý khi sử dụng transform và opacity là phần tử mà bạn thay đổi các thuộc tính này phải nằm trên lớp trình tổng hợp của chính nó. Để tạo một lớp, bạn phải quảng bá phần tử mà chúng ta sẽ đề cập đến ở phần tiếp theo.

Lưu ý: Nếu bạn lo ngại rằng có thể không giới hạn được ảnh động cho chỉ các thuộc tính đó, hãy xem nguyên tắc FLEDGE để xem lại ảnh động với những thay đổi về phép biến đổi và độ mờ từ các thuộc tính đắt tiền hơn.

Quảng bá các thành phần mà bạn định tạo ảnh động

Như chúng tôi đã đề cập trong phần "Đơn giản hóa độ phức tạp của việc vẽ và giảm diện tích sơn", bạn nên quảng bá các phần tử mà bạn định tạo ảnh động (trong trường hợp này, đừng lạm dụng nó!) vào lớp riêng của chúng:

.moving-element {
  will-change: transform;
}

Hoặc đối với trình duyệt cũ hơn hoặc trình duyệt không hỗ trợ trình duyệt sẽ thay đổi:

.moving-element {
  transform: translateZ(0);
}

Quản lý lớp và tránh nổ lớp

Do đó, bạn có thể hấp dẫn khi biết rằng các lớp thường giúp ích cho hiệu suất, để quảng bá tất cả các phần tử trên trang của bạn với những nội dung như sau:

* {
  will-change: transform;
  transform: translateZ(0);
}

Nói cách khác, nói rằng bạn muốn quảng bá từng phần tử trên trang. Vấn đề ở đây là mỗi lớp bạn tạo đều yêu cầu bộ nhớ và quản lý và điều này không miễn phí. Trên thực tế, trên các thiết bị có bộ nhớ hạn chế, tác động đối với hiệu suất có thể vượt trội hơn bất kỳ lợi ích nào của việc tạo lớp. Hoạ tiết của mọi lớp cần được tải lên GPU, vì vậy sẽ có thêm những hạn chế về băng thông giữa CPU và GPU, cũng như bộ nhớ có sẵn cho hoạ tiết trên GPU.

Cảnh báo : Không được quảng bá các thành phần một cách không cần thiết.

Sử dụng Công cụ của Chrome cho nhà phát triển để tìm hiểu các lớp trong ứng dụng của bạn

Để hiểu rõ về các lớp trong ứng dụng của bạn và lý do tại sao một phần tử có lớp, bạn phải bật Trình phân tích tài nguyên Paint trong Dòng thời gian của Công cụ của Chrome cho nhà phát triển:

Khi tính năng này được bật, bạn nên quay video. Khi quay xong, bạn có thể nhấp vào từng khung hình, xuất hiện giữa các thanh khung hình/giây và phần thông tin chi tiết:

Nhấp vào đây sẽ cung cấp cho bạn một tuỳ chọn mới trong chi tiết: thẻ lớp.

Tuỳ chọn này sẽ hiển thị một chế độ xem mới cho phép bạn xoay, quét và phóng to tất cả các lớp trong khung đó, cùng với lý do mỗi lớp được tạo.

Khi sử dụng chế độ xem này, bạn có thể theo dõi số lượng lớp mà mình có. Nếu dành nhiều thời gian cho việc tổng hợp trong các hành động quan trọng về hiệu suất như cuộn hoặc chuyển đổi (bạn nên nhắm đến khoảng 4-5 mili giây), bạn có thể sử dụng thông tin ở đây để xem số lượng lớp bạn có, lý do tạo các lớp đó và từ đó quản lý số lượng lớp trong ứng dụng của bạn.