Bảng điều khiển Performance (Hiệu suất) đánh dấu từng tác vụ chạy trong thời gian dài bằng một hình tam giác màu đỏ ở góc trên bên phải và một cảnh báo trong thẻ Summary (Tóm tắt), để cho biết công việc trên luồng chính mất nhiều thời gian để chạy và có hiệu suất chậm:
Trong các bản ghi hiệu suất của bạn, một số tác vụ chạy trong thời gian dài có thể là sự kiện Recalculate Style (Tính toán lại kiểu). Sự kiện Recalculate Style (Tính toán lại kiểu) sẽ theo dõi thời gian cần thiết để trình duyệt thực hiện thao tác sau:
- Lặp lại qua các phần tử DOM trên một trang để tìm tất cả quy tắc kiểu CSS phù hợp với một phần tử nhất định.
- Tính toán kiểu thực tế của từng phần tử, dựa trên các quy tắc về kiểu CSS trùng khớp.
Kiểu CSS cần được tính toán lại bất cứ khi nào khả năng áp dụng của các quy tắc CSS có thể thay đổi, chẳng hạn như khi:
- Các phần tử sẽ được thêm vào hoặc bị xoá khỏi DOM.
- Các thuộc tính của một phần tử thay đổi, chẳng hạn như giá trị của thuộc tính lớp hoặc mã nhận dạng.
- Người dùng thực hiện hoạt động đầu vào, chẳng hạn như di chuyển chuột hoặc thay đổi tiêu điểm phần tử. Việc này có thể ảnh hưởng đến các quy tắc
:hover.
Nếu thấy các sự kiện Tính toán lại kiểu diễn ra trong thời gian dài, bạn có thể sử dụng thẻ Số liệu thống kê về bộ chọn để biết bộ chọn CSS nào đang tốn nhiều thời gian nhất và làm chậm hiệu suất.
Thẻ Số liệu thống kê bộ chọn cung cấp số liệu thống kê về bộ chọn quy tắc CSS có liên quan đến một hoặc nhiều sự kiện Tính toán lại kiểu trong bản ghi hiệu suất.
Ghi lại dấu vết hoạt động khi bật Số liệu thống kê bộ chọn
Để xem số liệu thống kê của bộ chọn quy tắc CSS trong các sự kiện Tính toán lại kiểu lâu dài, hãy ghi lại dấu vết hoạt động khi bật chế độ cài đặt thu thập Số liệu thống kê bộ chọn.
Cách ghi lại dấu vết hoạt động bằng số liệu thống kê của bộ chọn:
Mở một trang web, ví dụ: trang minh hoạ của Thư viện ảnh.
Mở Công cụ cho nhà phát triển rồi chuyển đến bảng điều khiển Hiệu suất.
Trong bảng điều khiển Hiệu suất, hãy nhấp vào nút cài đặt Cài đặt chụp và chọn check_box Bật thống kê bộ chọn CSS.
Nhấp vào radio_button_checked Ghi, chạy tình huống mà bạn muốn cải thiện, sau đó nhấp vào radio_button_checked Dừng.
Sau đó, hãy xem số liệu thống kê về bộ chọn CSS, như mô tả trong các phần tiếp theo.
Xem số liệu thống kê của bộ chọn quy tắc CSS cho một sự kiện
Cách xem số liệu thống kê về bộ chọn quy tắc CSS có liên quan đến một sự kiện Tính toán lại kiểu:
Ghi lại hoạt động theo dõi hoạt động khi bật Số liệu thống kê về bộ chọn.
Tìm một sự kiện Recalculate Style (Tính toán lại kiểu) trong bản ghi hiệu suất rồi nhấp vào sự kiện đó.
Trong phần dưới cùng của bảng Hiệu suất, hãy mở thẻ Thống kê bộ chọn.
Bảng bộ chọn CSS trong thẻ Số liệu thống kê về bộ chọn
Thẻ Số liệu thống kê về bộ chọn chứa một bảng các bộ chọn CSS. Bảng hiển thị thông tin sau cho từng bộ chọn CSS:
| Cột | Nội dung mô tả |
|---|---|
| Đã trôi qua (mili giây) | Khoảng thời gian mà trình duyệt đã dùng để so khớp bộ chọn CSS này. Thời gian này được tính bằng mili giây (ms), trong đó 1 ms là 1/1000 của giây. |
| Số lần bắt bóng | Số phần tử mà công cụ trình duyệt đã cố gắng so khớp với công cụ chọn CSS này. |
| Số lượng phù hợp | Số phần tử mà công cụ trình duyệt khớp với bộ chọn CSS này. |
| Tỷ lệ phần trăm đường dẫn chậm không khớp | Tỷ lệ các phần tử không khớp với bộ chọn CSS này, với các phần tử mà công cụ trình duyệt đã cố gắng so khớp và yêu cầu công cụ trình duyệt sử dụng mã ít được tối ưu hóa hơn để khớp. |
| Bộ chọn | Bộ chọn CSS đã khớp. |
| Biểu định kiểu | Biểu định kiểu CSS chứa bộ chọn CSS. |
Khi hoàn tất, trong bảng Hiệu suất, hãy mở cài đặt Cài đặt chụp và xóa check_box Bật số liệu thống kê của bộ chọn CSS.
Xem số liệu thống kê về bộ chọn quy tắc CSS cho nhiều sự kiện
Để xem số liệu thống kê tổng hợp về bộ chọn quy tắc CSS có liên quan đến nhiều sự kiện Tính toán lại kiểu, hãy sao chép nhiều bảng Thống kê bộ chọn vào một bảng tính như sau:
Ghi lại hoạt động theo dõi hoạt động khi bật Số liệu thống kê về bộ chọn.
Tìm sự kiện Recalculate Style (Tính toán lại kiểu) đầu tiên mà bạn quan tâm, rồi nhấp vào sự kiện đó.
Trong phần dưới cùng của bảng Hiệu suất, hãy mở thẻ Thống kê bộ chọn.
Nhấp chuột phải vào bảng số liệu thống kê của bộ chọn rồi chọn Sao chép bảng.
Dán bảng vào một bảng tính, chẳng hạn như Google Trang tính.
Lặp lại các bước trước đó với các sự kiện Tính toán lại kiểu khác mà bạn quan tâm.
Khi hoàn tất, trong bảng Hiệu suất, hãy mở cài đặt Cài đặt chụp và xóa check_box Bật số liệu thống kê của bộ chọn CSS.
Xem số liệu thống kê tổng hợp về bộ chọn quy tắc CSS để ghi lại toàn bộ bản ghi
Cách xem số liệu thống kê tổng hợp về bộ chọn quy tắc CSS có liên quan đến toàn bộ bản ghi hiệu suất:
Ghi lại hoạt động theo dõi hoạt động khi bật Số liệu thống kê về bộ chọn.
Nhấp vào một vùng trống của biểu đồ hình ngọn lửa để bỏ chọn bất kỳ sự kiện nào có thể chọn.
Chọn toàn bộ phạm vi ghi âm. Để làm việc này, hãy nhấp đúp vào biểu đồ CPU ở đầu bảng điều khiển Performance (Hiệu suất).
Trong phần dưới cùng của bảng Hiệu suất, hãy mở thẻ Thống kê bộ chọn. Bạn sẽ thấy một hàng mới ở trên cùng có dữ liệu về tổng số cho tất cả bộ chọn.
Khi hoàn tất, trong bảng Hiệu suất, hãy mở cài đặt Cài đặt chụp và xóa check_box Bật số liệu thống kê của bộ chọn CSS.
Phân tích số liệu thống kê của bộ chọn CSS
Để sắp xếp dữ liệu trong bảng Thống kê bộ chọn theo thứ tự tăng dần hoặc giảm dần, hãy nhấp vào tiêu đề cột. Ví dụ: để xem bộ chọn CSS nào mất nhiều thời gian nhất, hãy nhấp vào tiêu đề cột Đã trôi qua (mili giây).
Để cố gắng cải thiện hiệu suất của trang web, hãy tập trung vào bộ chọn CSS:
- Mất nhiều thời gian để tính toán (giá trị Đã trôi qua (mili giây) cao).
- Trình duyệt đã cố gắng so khớp nhiều lần (giá trị Số lượt so khớp cao).
- Trình duyệt không thực sự khớp nhiều phần tử (giá trị Số lượt so khớp thấp so với giá trị Số lượt so khớp).
- Đường dẫn này có tỷ lệ phần trăm đường dẫn chậm cao không khớp.
Ví dụ: trong ảnh chụp màn hình trước đó:
- Bộ chọn CSS đầu tiên (
html body .ps[tooltip...) cần nhiều thời gian nhất. - Công cụ trình duyệt đã cố gắng khớp bộ chọn CSS này 1104 lần nhưng không khớp với bất kỳ phần tử nào.
Do đó, bộ chọn CSS này là ứng viên đầu tiên cần cố gắng cải thiện.
Hãy thử thay đổi bộ chọn CSS của bạn để chúng cần ít thời gian hơn để tính toán và khớp với ít phần tử hơn trên trang. Cách cải thiện bộ chọn CSS tuỳ thuộc vào trường hợp sử dụng cụ thể của bạn.
Lặp lại các bước trong hướng dẫn này để xác nhận rằng những thay đổi của bạn đã giúp giảm thời lượng sự kiện Tính toán lại kiểu, trong cột Đã trôi qua (mili giây).