Sơn là quá trình lấp đầy các pixel cuối cùng được kết hợp với màn hình của người dùng. Đây thường là thao tác chạy lâu nhất trong tất cả các tác vụ trong quy trình và là thao tác cần tránh nếu có thể.
Sơn là quá trình tô màu các pixel mà cuối cùng sẽ được kết hợp với màn hình của người dùng. Đây thường là thao tác chạy lâu nhất trong tất cả các tác vụ trong quy trình và là thao tác 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 tính năng biến đổi hoặc độ mờ luôn kích hoạt thao tác vẽ.
- Sơn thường là phần tốn kém nhất của quy trình pixel; hãy tránh nó ở những nơi có thể.
- Giảm các vùng vẽ 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 màu trong Công cụ của Chrome cho nhà phát triển để đánh giá độ phức tạp và chi phí của quá trình vẽ; giảm bớt nếu có thể.
Kích hoạt bố cục và hiển thị
Nếu kích hoạt bố cục, bạn sẽ luôn kích hoạt tính năng vẽ, vì việc thay đổi hình dạng của bất kỳ phần tử nào có nghĩa là các pixel của phần tử đó cần phải được 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, như nền, màu văn bản hoặc bóng. Trong những trường hợp đó, bạn 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 nút thắt cổ chai của 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 vẽ. Mở thẻ Rendering (Kết xuất), sau đó bật tính năng Paint Flashing (Nhấp nháy đèn).
Khi bạn bật tuỳ chọn này, Chrome sẽ nhấp nháy màn hình màu xanh lục 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 của màn hình mà bạn nghĩ không nên vẽ, thì bạn nên tìm hiểu kỹ hơn một chút.
Tăng cường các thành phần chuyển động hoặc làm mờ
Không phải lúc nào việc vẽ tranh cũng được tạo 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ẽ thành nhiều hình ảnh hoặc lớp trình 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 sơn lại hoặc di chuyển trên màn hình bằng các phép 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 hình ảnh nghệ thuật như Sketch, GIMP hoặc Photoshop, trong đó bạn có thể xử lý và kết hợp các 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 lớp mới là sử dụng thuộc tính CSS will-change. Tính năng 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) phép biến đổi 3D để buộc tạo lớp mới:
.moving-element {
transform: translateZ(0);
}
Tuy nhiên, phải cẩn thận để không tạo quá nhiều lớp vì mỗi lớp yêu cầu cả bộ nhớ và quản lý. Bạn có thể tìm hiểu thêm thông tin về vấn đề này trong phần Gắn với 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.
Nếu bạn đã thăng cấp một phần tử lên một 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 lập hồ sơ.
Giảm diện tích sơn
Tuy nhiên, đôi khi, mặc dù đã quảng bá các yếu tố, nhưng công việc sơn vẫn là cần thiết. Một thách thức lớn đối với các vấn đề về sơn là các trình duyệt hợp nhất hai khu vực cần vẽ, và điều này có thể dẫn đến việc toàn bộ màn hình sẽ được vẽ lại. Ví dụ: nếu bạn có tiêu đề cố định ở đầu trang và một số nội dung được vẽ ở cuối màn hình, thì có thể toàn bộ màn hình sẽ được sơn lại.
Giảm vùng vẽ thường là cách sắp xếp ảnh động và hiệu ứng chuyển tiếp để không chồng chéo 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 bản vẽ
Nói đến hội hoạ, một số thứ đắt hơn những thứ khác. Ví dụ: bất kỳ thứ gì có liên quan đến việc làm mờ (ví dụ như bóng đổ) sẽ mất nhiều thời gian vẽ hơn so với vẽ một hộp màu đỏ. Tuy nhiên, xét về 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); không nhất thiết trông giống như có các đặc điểm hiệu suất quá khác nhau, nhưng chúng có.
Trình phân tích màu vẽ ở 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 nhóm kiểu rẻ hơn hoặc phương pháp thay thế để đạt được kết quả cuối cùng hay không.
Trong những trường hợp mà bạn có thể luôn muốn tránh vẽ trong các ảnh động cụ thể, vì 10 mili giây bạn có cho mỗi khung hình thường không đủ dài để hoàn thành công việc vẽ, đặc biệt là trên thiết bị di động.