Phần kết hợp là nơi các phần được vẽ của trang được ghép lại với nhau để hiển thị trên màn hình.
Phần kết hợp là nơi các phần được vẽ của trang được tập hợp lại để đang hiển thị trên màn hình.
Có hai yếu tố chính trong lĩnh vực này ảnh hưởng đến hiệu suất trang: số lượng lớp trình 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
- Tiếp tục thay đổi biến đổi và độ mờ cho hoạt ảnh của bạn.
- Quảng bá các phần tử chuyển động bằng
will-changehoặctranslateZ. - Tránh lạm dụng quy tắc quảng bá; các tầng đòi hỏi bộ nhớ và quản lý.
Sử dụng thay đổi biến đổi và độ mờ cho ảnh động
Phiên bản hoạt động hiệu quả nhất của quy trình pixel tránh được cả bố cục lẫn tô màu và chỉ yêu cầu kết hợp các thay đổi:
Để đạt được điều này, bạn cần phải sử dụng các thuộc tính thay đổi mà trình tổng hợp có thể xử lý riêng. Hiện tại, chỉ có hai thuộc tính đúng là 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 riêng phần tử đó. Để tạo một lớp, bạn phải quảng bá cho phần tử này, chúng ta sẽ đề cập đến phần tiếp theo.
Quảng bá các phần tử mà bạn định tạo ảnh động
Như chúng tôi đã đề cập trong nội dung "Đơn giản hoá độ phức tạp của sơn 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 hoạt ảnh (trong lý do nào đó, đừng lạm dụng!) vào lớp riêng của chúng:
.moving-element {
will-change: transform;
}
Hoặc, đối với các trình duyệt cũ hơn hoặc những trình duyệt không hỗ trợ sẽ thay đổi:
.moving-element {
transform: translateZ(0);
}
Quản lý các lớp và tránh sự cố nổ lớp
Khi biết rằng các lớp thường giúp hiệu suất, bạn nên quảng bá tất cả các yếu tố trên trang của mình bằng những thông tin như sau:
* {
will-change: transform;
transform: translateZ(0);
}
Nói một cách vòng tròn rằng bạn muốn quảng cáo mọi thành phần riêng lẻ trên trang. Vấn đề ở đây là mỗi lớp bạn tạo ra đều cần bộ nhớ và khả năng quản lý, và việc đó 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 xa bất kỳ lợi ích nào của việc tạo một lớp. Mọi hoạ tiết của lớp đều cần được tải lên GPU, vì vậy, sẽ có những hạn chế hơn nữa về băng thông giữa CPU và GPU, cũng như bộ nhớ có sẵn cho các 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 về các lớp trong ứng dụng của bạn
Để hiểu về các lớp trong ứng dụng của bạn cũng như lý do tại sao một phần tử lại có lớp, bạn phải bật Trình phân tích sơn trong Công cụ của Chrome cho nhà phát triển Dòng thời gian:
Khi bật chế độ này, bạn cần ghi âm. Khi quá trình quay hoàn tất, bạn có thể nhấp vào từng khung hình riêng lẻ, nằm giữa các thanh khung hình/giây và thông tin chi tiết:
Nhấp vào đây sẽ cung cấp cho bạn một tùy chọn mới trong thông tin chi tiết: mộ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à 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 đang dành nhiều thời gian để 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 bạn có bao nhiêu lớp, 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.