Tạo điểm ảnh là quá trình lấp đầy pixel mà rốt cuộc sẽ được kết hợp với màn hình. Đây thường là tác vụ chạy lâu nhất trong tất cả các tác vụ trong quy trình và là tác vụ cần tránh nếu có thể.
Tạo điểm ảnh là quá trình lấp đầy pixel mà cuối cùng sẽ được kết hợp với của người dùng màn hình. Đây thường là nhiệm vụ dài nhất trong số tất cả các tác vụ trong và một quy trình cần tránh nếu có thể.
Tóm tắt
- Việc thay đổi bất kỳ thuộc tính nào ngoài biến đổi hoặc độ mờ luôn kích hoạt vẽ.
- Sơn thường là phần tốn kém nhất trong quy trình pixel; hãy tránh việc này nếu có thể.
- Giảm diện tích sơn thông qua việc quảng bá lớp và điều phối ảnh động.
- Sử dụng trình phân tích sơn trong Công cụ của Chrome cho nhà phát triển để đánh giá độ phức tạp và chi phí vẽ; hãy giảm bớt nếu có thể.
Kích hoạt bố cục và hoạt động hiển thị
Nếu kích hoạt bố cục, bạn sẽ luôn kích hoạt vẽ, vì việc thay đổi hình dạng của bất kỳ phần tử nào có nghĩa là pixel của phần tử đó cần sửa!
Bạn cũng có thể kích hoạt tính năng vẽ nếu thay đổi các thuộc tính không phải hình học, chẳng hạn như nền, màu văn bản hoặc bóng. Trong những trường hợp đó, bạn sẽ không cần bố cục và quy trình sẽ có dạng như sau:
Sử dụng Công cụ của Chrome cho nhà phát triển để nhanh chóng xác định điểm tắc nghẽn về sơn
Bạn có thể sử dụng Công cụ của Chrome cho nhà phát triển để nhanh chóng xác định các khu vực đang được tô màu. Mở thẻ Kết xuất rồi bật tính năng Paint Flashing (Nhấp nháy màu).
Khi bạn bật tuỳ chọn này, Chrome sẽ nhấp nháy màu xanh lục màn hình bất cứ khi nào quá trình vẽ diễn ra. Nếu bạn thấy toàn bộ màn hình nhấp nháy màu xanh lục hoặc các vùng màn hình mà bạn không nghĩ rằng nên vẽ, thì bạn nên xem chi tiết hơn một chút.
Quảng bá các phần tử di chuyển hoặc làm mờ
Việc tô màu không phải lúc nào cũng thành một hình ảnh duy nhất trong bộ nhớ. Trên thực tế, trình duyệt có thể vẽ vào nhiều hình ảnh hoặc các lớp tổng hợp, nếu cần.
Lợi ích của phương pháp này là có thể xử lý các phần tử thường xuyên được tô lại hoặc di chuyển trên màn hình với sự biến đổi mà không ảnh hưởng đến các phần tử khác. Điều này cũng giống như với các gói nghệ thuật như Sketch, GIMP hoặc Photoshop, trong đó bạn có thể xử lý và kết hợp từng lớp riêng lẻ lên nhau để tạo ra hình ảnh hoàn thiện.
Cách tốt nhất để tạo một lớp mới là sử dụng thuộc tính CSS will-change. Cách này sẽ hoạt động trong Chrome, Opera và Firefox và với giá trị transform, sẽ tạo một lớp trình tổng hợp mới:
.moving-element {
will-change: transform;
}
Đối với các trình duyệt không hỗ trợ will-change nhưng được hưởng lợi từ việc tạo lớp, chẳng hạn như Safari và Mobile Safari, bạn cần sử dụng (sai) biến đổi 3D để tạo lớp mới:
.moving-element {
transform: translateZ(0);
}
Phải cẩn thận để không tạo quá nhiều lớp, tuy nhiên, mỗi lớp đòi hỏi cả bộ nhớ và việc quản lý. Bạn có thể xem thêm thông tin về vấn đề này trong phần Gắn với thuộc tính chỉ dành cho trình tổng hợp và quản lý số lượng lớp.
Nếu bạn đã quảng bá một phần tử lên lớp mới, hãy sử dụng Công cụ cho nhà phát triển để xác nhận rằng việc này đã mang lại cho bạn lợi ích về hiệu suất. Đừng quảng bá các thành phần khi chưa phân tích tài nguyên.
Giảm khu vực sơn
Tuy nhiên, đôi khi, mặc dù cần quảng bá các yếu tố, nhưng công việc tô màu vẫn cần thiết. Một thách thức lớn về khả năng vẽ là các trình duyệt hợp nhất hai khu vực cần vẽ lại với nhau, dẫn đến việc toàn bộ màn hình bị vẽ lại. Ví dụ: nếu bạn có tiêu đề cố định ở đầu trang và nội dung nào đó được vẽ ở cuối màn hình, thì toàn bộ màn hình có thể sẽ được vẽ lại.
Việc giảm vùng vẽ thường là trường hợp cần sắp xếp các hoạt ảnh và hiệu ứng chuyển tiếp để không chồng chéo nhau nhiều hoặc tìm cách tránh tạo ảnh động cho một số phần nhất định của trang.
Đơn giản hoá độ phức tạp của lớp vẽ
Là một sản phẩm sơn, một số thứ đắt tiền hơn những thứ khác. Ví dụ: mọi thứ liên quan đến việc làm mờ (ví dụ như bóng) sẽ mất nhiều thời gian hơn để vẽ hơn là -- chẳng hạn như -- vẽ một hộp màu đỏ. Tuy nhiên, về mặt CSS, điều này không phải lúc nào cũng rõ ràng: background: red; và box-shadow: 0, 4px, 4px, rgba(0,0,0,0.5); trông không nhất thiết có vẻ như có quá nhiều đặc điểm hiệu suất, nhưng chúng thì có.
Trình phân tích sơn ở trên sẽ cho phép bạn xác định xem bạn có cần xem xét các cách khác để đạt được hiệu ứng hay không. Hãy tự hỏi xem có thể sử dụng một tập hợp các kiểu có chi phí rẻ hơn hoặc các phương pháp thay thế để đạt được kết quả cuối cùng hay không.
Cụ thể, bạn luôn muốn tránh vẽ trong khi vẽ trong ảnh động, vì 10 mili giây bạn có trên mỗi khung hình thường không đủ lâu để hoàn tất công việc vẽ, đặc biệt là trên thiết bị di động.