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.
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ặctranslateZ
. - 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:
![Quy trình pixel không có bố cục hoặc tô màu.](https://web.dev/static/articles/stick-to-compositor-only-properties-and-manage-layer-count/image/the-pixel-pipeline-no-la-96825803c8cec.jpg?authuser=5&hl=vi)
Để 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
:
![Các thuộc tính có thể tạo ảnh động mà không cần kích hoạt bố cục hoặc tô màu.](https://web.dev/static/articles/stick-to-compositor-only-properties-and-manage-layer-count/image/the-properties-can-anima-100ed2c7d26a4.jpg?authuser=5&hl=vi)
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.
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.
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
![Nút bật/tắt cho trình phân tích màu vẽ trong Công cụ của Chrome cho nhà phát triển.](https://web.dev/static/articles/stick-to-compositor-only-properties-and-manage-layer-count/image/the-toggle-the-paint-pro-0bfd1048bb7de.jpg?authuser=5&hl=vi)
Để 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:
![Khung mà nhà phát triển muốn phân tích.](https://web.dev/static/articles/stick-to-compositor-only-properties-and-manage-layer-count/image/a-frame-developer-is-int-195784f471018.jpg?authuser=5&hl=vi)
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.
![Nút thẻ lớp trong Công cụ của Chrome cho nhà phát triển.](https://web.dev/static/articles/stick-to-compositor-only-properties-and-manage-layer-count/image/the-layer-tab-button-chr-b74ebc86acad5.jpg?authuser=5&hl=vi)
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.
![Chế độ xem lớp trong Công cụ của Chrome cho nhà phát triển.](https://web.dev/static/articles/stick-to-compositor-only-properties-and-manage-layer-count/image/the-layer-view-chrome-de-04740f747ced7.jpg?authuser=5&hl=vi)
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.