Giới thiệu
Nếu là người luôn theo dõi những thông tin như cách 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ị trình bày chi tiết về hoạt động kết hợp/trình kết xuất được tăng tốc GPU của Chrome. Trước tiên, Accelerated Rendering in Chrome: The Layer Model (Kết xuất tăng tốc trong Chrome: Mô hình lớp) là một bài giới thiệu hay về cách Chrome sử dụng khái niệm lớp để vẽ trang; và để tìm hiểu sâu hơn, bài viết GPU Accelerated Compositing in Chrome (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ủa bạn.
Câu hỏi triết học
Sau khi dành 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õ ràng rằng một số thuộc tính CSS sẽ có hiệu suất khác nhau khi vẽ trang. Ví dụ: việc tạo điểm ảnh cho một hình ảnh nhỏ trên màn hình là một thao tác thuật toán hoàn toàn khác với việc vẽ bóng đổ trên một hình dạng tuỳ ý. Vì vậy, câu hỏi đặt ra là: Các thuộc tính CSS khác nhau ảnh hưởng như thế nào đến trọng số hiển thị của trang?
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 ta có thể hiểu được loại thuộc tính CSS nào có hiệu suất cao hơn các thuộc tính khác. Để làm việc này, tôi đã viết một số quy trình tự động hoá bằng băng keo và kẹo cao su để cố gắng thêm chế độ hiển thị 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 các thuộc tính CSS được đính kèm vào đó.
- Chạy một số tập lệnh tự động hoá, đối với mỗi trang, tập lệnh này sẽ:
- Khởi chạy Chrome
- Tải trang
- Tạo Ảnh Skia cho trang
- Chạy từng Ảnh Skia được chụp thông qua Skia Benchmark để lấy thời gian
- Kết xuất tất cả thời gian và ngạc nhiên trước các con số. (Phần này rất quan trọng…)
Với 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í dụ khác 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ụ trước, trong đó chúng ta chỉ thay đổi giá trị radial-gradient:
<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 Chrome mới (để đảm bảo rằng thời gian không bị ảnh hưởng bởi bất kỳ trạng thái cũ nào trong quá trình tải lại trang) và một Ảnh Skia (*.SKP) được chụp để đánh giá những lệnh Skia nào được dùng để vẽ trang. Sau khi tạo tệp SKP cho mỗi tệp HTML, chúng tôi sẽ 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 Skia) để kết xuất thời gian trung bình cần thiết để hiển thị trang đó.
Đánh giá dữ liệu
Từ đó, chúng ta có thể lập biểu đồ về thời gian vẽ một bộ thuộc tính CSS. Hoặc chúng ta có thể bắt đầu xếp hạng các thuộc tính CSS theo hiệu suất hiển thị. Dưới đây là một biểu đồ lớn được chụp bằng Chrome 27 beta cho thấy toàn bộ dữ liệu về thời gian của quy trình này. Xin lưu ý rằng tất cả dữ liệu đều có thể thay đổi vì Chrome ngày càng nhanh hơn theo thời gian.
Mỗi thanh dọc đại diện cho thời gian vẽ của một trang có một tổ hợp thuộc tính CSS duy nhất (được phóng to 100 lần; giá trị theo tỷ lệ thực của biểu đồ này là 0,1,56 mili giây). Có rất nhiều đường kẻ đẹp mắt, nhưng ở dạng này thì có phần vô dụng; chúng ta cần khai thác dữ liệu để tìm ra các xu hướng hữu ích.
Trước tiên, chúng ta tìm thấy bằng chứng cho thấy một số thuộc tính CSS có chi phí hiển thị cao hơn các thuộc tính khác. Ví dụ: việc vẽ bóng đổ trên một phần tử DOM liên quan đến thao tác nhiều lượt với các đường spline và các loại nội dung khó chịu khác, trái ngược với độ mờ sẽ dễ hiển thị 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ị lớn hơn tổng các phần của chúng. Theo góc nhìn của người quan sát, điều này có vẻ hơi lạ, chúng ta sẽ mong đợi 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ị ở đây là không chỉ có thuộc tính box-shadow mà còn có hoán vị giá trị cụ thể đó. Ví dụ: dưới đây là nhóm box-shadow : 50% và border-radius có các biến thể giá trị.
Dựa vào dữ liệu, tình trạng này sẽ tiếp diễn 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 thể bao quát hết; vẫn còn rất nhiều kiểu kiểm thử và kết hợp có thể mang lại kết quả thú vị
Tìm trọng số hiển thị của trang
Khi có khả năng theo dõi thời gian kết xuất cho từng phần tử trên trang, 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 khả năng thích ứng của trang web. Sau đây là một số mẹo để bắt đầu
- Sử dụng chế độ Vẽ liên tục của Chrome trong Công cụ của Chrome cho nhà phát triển để nắm được những thuộc tính CSS nào đang gây tốn kém cho bạn.
- Kết hợp quy trình xem xét CSS vào quy trình xem xét mã hiện có để phát hiện các vấn đề về hiệu suất Tìm những vị trí trong CSS mà bạn đang sử dụng những thành phần được biết là tốn kém hơn, chẳng hạn như dải màu và bóng. Hãy tự hỏi: Tôi có thực sự cần những từ khoá này ở đây không?
- Nếu bạn không chắc chắn, hãy luôn chọn phương án có hiệu suất tốt hơn. Người dùng có thể không nhớ chiều rộng khoảng đệm trên các cột của bạn, nhưng họ sẽ nhớ cảm giác khi truy cập vào trang web của bạn.
Những chỉnh sửa 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 theo từng phiên bản Chrome (hy vọng là nhanh hơn ;) phần mềm trình duyệt là một nền tảng luôn thay đổi. Hôm nay chậm, ngày mai có thể nhanh. Bạn có thể rút ra từ bài viết này để tránh đặt box-shadow: 1px 2px 3px 4px vào một phần tử đã có border-radius:5. Tuy nhiên, điều quan trọng 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.