Giới thiệu
Nếu bạn là người bắt kịp những điều như cách thức hoạt động của trình duyệt, thì bạn đã biết rằng gần đây có một số bài viết thú vị giới thiệu chi tiết về hoạt động kết hợp/kết xuất đồ hoạ tăng tốc GPU của Chrome. Trước tiên, Kết xuất nhanh trong Chrome: Mô hình lớp là bài giới thiệu tuyệt vời về cách Chrome sử dụng khái niệm về các lớp để vẽ trang; và để tìm hiểu sâu hơn, bài viết Kết hợp tăng tốc GPU trong Chrome thảo luận về cách Chrome sử dụng các lớp này cùng với GPU để kết xuất trang.
Câu hỏi về triết lý
Đã dành rất nhiều thời gian để viết trình tạo điểm ảnh phần mềm cho mục đích 3D, tôi nhận thấy rõ một số thuộc tính CSS phải thay đổi hiệu suất khi vẽ trang của bạn. Ví dụ: tạo điểm ảnh cho một hình ảnh nhỏ lên màn hình là một thao tác thuật toán hoàn toàn khác, vẽ một bóng đổ trên một hình dạng tuỳ ý. Vì vậy, câu hỏi trở thành: Các thuộc tính CSS khác nhau ảnh hưởng đến trọng số hiển thị của trang như thế nào?
Mục tiêu của tôi là phân loại một tập hợp lớn các thuộc tính/giá trị CSS theo thời gian hiển thị để chúng tôi có thể hiểu rõ những loại thuộc tính CSS nào hoạt động hiệu quả hơn các loại thuộc tính CSS khác. Để thực hiện việc này, tôi đã viết một số đoạn tự động với keo dán và kẹo cao su bong bóng để cố gắng thêm chế độ hiển thị bằng số vào thời gian vẽ CSS, hoạt động như sau:
- Tạo một bộ trang HTML riêng lẻ; mỗi trang có một phần tử DOM duy nhất và một số hoán vị của thuộc tính CSS kèm theo.
- Chạy một số tập lệnh tự động hoá mà cho mỗi trang sẽ:
- Khởi chạy Chrome
- Tải trang
- Tạo Ảnh trượt tuyết cho trang
- Chạy từng Hình ảnh của Skia được chụp qua Skia Benchmark để lấy dấu thời gian
- Hãy công bố tất cả thời gian và ngạc nhiên trước những con số này. (Phần này quan trọng...)
Với cách thiết lập này, chúng tôi tạo một bộ trang HTML, trong đó mỗi trang chứa một hoán vị duy nhất của các thuộc tính và giá trị CSS; ví dụ: dưới đây là hai tệp html:
<style>
#example1 {
background: url(foo.png) top left / 50% 60%;
padding: 20px;
margin-top: 10px;
margin-right: 20px;
text-align: center;
}
</style>
<div id="example1">WOAH</div>
Và một vấn đề khác là phức tạp hơn
<style>
#example1 {
background-color:#eee;
box-shadow: 1px 2px 3px 4px black;
border-radius: 50%;
background: radial-gradient(circle closest-corner, white, black);
padding: 20px;
margin-top: 10px;
margin-right: 20px;
text-align: center;
}
</style>
<div id="example1">WOAH</div>
Dưới đây là một biến thể của ví dụ cuối, chúng ta chỉ thay đổi giá trị chuyển màu dạng hình tròn:
<style>
#example1
{
background-color:#eee;
box-shadow: 1px 2px 3px 4px black;
border-radius: 50%;
background: radial-gradient(farthest-side, white, black);
padding: 20px;
margin-top: 10px;
margin-right: 20px;
text-align: center;
}
</style>
<div id="example1" style="padding: 20px; margin-top: 10px;margin-right: 20px; text-align: center;">WOAH</div>
Sau đó, mỗi trang sẽ được tải vào một phiên bản mới của Chrome (để đảm bảo rằng thời gian không bị sai lệch do bất kỳ trạng thái lỗi thời nào trong quá trình tải lại trang), và hệ thống sẽ sử dụng Hình ảnh trượt tuyết (*.SKP) để đánh giá những lệnh Skia dùng để vẽ trang. Sau khi các tệp SKP được tạo cho từng tệp HTML, chúng tôi chạy một lô khác để đẩy các tệp *.SKP qua ứng dụng Skia Benchmark (được tạo từ mã nguồn SKP). Công cụ này hiển thị thời gian trung bình cần thiết để hiển thị trang đó.
Đánh giá dữ liệu
Từ thông tin này, bây giờ chúng ta có một số khả năng tương đối để lập biểu đồ về mức phí mà một bộ thuộc tính CSS cần để vẽ. Hoặc nói cách khác là chúng ta có thể bắt đầu các tài sản CSS xếp hạng theo thứ hạng ngăn xếp dựa vào hiệu suất sao chép. Dưới đây là một biểu đồ lớn được chụp bằng Chrome 27 beta thể hiện tất cả tập dữ liệu thời gian đầy đủ của quy trình này. Xin lưu ý rằng tất cả dữ liệu có thể thay đổi vì Chrome hoạt động nhanh hơn và nhanh hơn theo thời gian.
Mỗi thanh dọc biểu thị thời gian vẽ của một trang với một kết hợp duy nhất các thuộc tính CSS (được phóng to 100 lần; Giá trị thang đo thực của biểu đồ này là 0,1,56 mili giây). Có rất nhiều dòng đẹp, nhưng ở dạng này thì có phần vô ích; chúng ta cần phải khai thác dữ liệu để tìm ra các xu hướng hữu ích.
Trước tiên, chúng tôi tìm thấy bằng chứng cho thấy một số tài sản CSS thấy tốn kém hơn so với các tài sản CSS khác. Ví dụ: việc vẽ bóng đổ trên phần tử DOM liên quan đến thao tác nhiều luồng với các đường kẻ và các loại thành phần xấu khác, trái ngược với độ mờ cần kết xuất dễ dàng hơn.
Thứ hai và thú vị hơn, các tổ hợp Thuộc tính CSS có thể có thời gian hiển thị dài hơn tổng các thành phần. Từ góc độ của quan sát viên, điều này hơi kỳ lạ, chúng ta hy vọng A+B = C, chứ không phải 2,2C. Ví dụ: thêm box-shadow và border-radius-stroke:
Điều thực sự thú vị là ở chỗ không chỉ thuộc tính box-shadow, mà còn là sự hoán vị giá trị cụ thể đó. Ví dụ: bên dưới cho thấy một nhóm box-shadow : 50% và border-radius với các biến thể giá trị.
Xem xét dữ liệu, quá trình này sẽ diễn ra trong một thời gian. Có rất nhiều kiểu kết hợp kỳ lạ và bộ kiểm thử của tôi hầu như không đụng đến tất cả; vẫn còn rất nhiều thử nghiệm và kiểu kết hợp có thể mang lại những kết quả thú vị
Tìm trọng số hiển thị trang
Với khả năng theo dõi thời gian hiển thị cho mỗi phần tử trên trang của bạn, nhà phát triển có thể bắt đầu đánh giá trọng số kết xuất trang và mức độ ảnh hưởng của trọng số này đến khả năng phản hồi của trang web. Sau đây là một vài mẹo giúp bạn bắt đầu
- Sử dụng chế độ Hiển thị liên tục của Chrome trong Công cụ dành cho nhà phát triển Chrome để hiểu rõ các thuộc tính CSS nào đang tính phí bạn.
- Đưa bài đánh giá về CSS vào quy trình xem xét mã hiện tại của bạn để phát hiện các vấn đề về hiệu suất Tìm các vị trí trong CSS mà bạn đang sử dụng những thứ được biết là tốn kém hơn, như độ dốc và bóng. Hãy tự hỏi xem trường hợp này có thực sự cần thiết không?
- Khi nghi ngờ, hãy luôn mắc lỗi thay vì cải thiện hiệu suất. Người dùng có thể không nhớ chiều rộng khoảng đệm trên cột là bao nhiêu nhưng họ sẽ nhớ cảm giác khi truy cập vào trang web của bạn.
Cảm nghĩ cuối
Một trong những điều thú vị nhất về thử nghiệm này là thời gian sẽ tiếp tục thay đổi với mỗi phần mềm trình duyệt phiên bản Chrome (hy vọng là nhanh hơn;) là một khu vực bề mặt luôn thay đổi. Hôm nay tốc độ chậm, ngày mai có thể sẽ nhanh. Bạn có thể xem bài viết này để tránh đặt box-shadow: 1px 2px 3px 4px cho một phần tử đã có border-radius:5. Tuy nhiên, điểm đáng chú ý hơn là các thuộc tính CSS ảnh hưởng trực tiếp đến thời gian hiển thị trang.