Bảng điều khiển 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ẻ Tóm tắt để cho biết tác vụ chính mất nhiều thời gian chạy nhưng có hiệu suất chậm:
Trong các bản ghi hiệu suất, một số những tác vụ chạy trong thời gian dài này có thể là sự kiện Tính toán lại kiểu. Sự kiện Recalculate Style (Tính toán lại kiểu) theo dõi thời gian trình duyệt cần để thực hiện các công việc sau:
- Lặp lại các phần tử DOM trên một trang để tìm tất cả cá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 mỗi phần tử, dựa trên các quy tắc về kiểu CSS phù hợp.
Kiểu CSS cần được tính toán lại mỗi khi 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ử được thêm vào hoặc bị loại bỏ khỏi DOM.
- Các thuộc tính của một phần tử được 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 các thao tác đầu vào, chẳng hạn như di chuyển chuột hoặc thay đổi tiêu điểm của phần tử. Điều này có thể ảnh hưởng đến các quy tắc
:hover.
Các sự kiện Tính toán lại kiểu diễn ra trong thời gian dài có thể gây ra vấn đề về hiệu suất và có thể là nguyên nhân gây ra sự chậm trễ trong thời gian dài, gây ảnh hưởng đến Lượt tương tác với nội dung hiển thị tiếp theo (INP) trên trang web của bạn. 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 để tìm hiểu xem bộ chọn CSS nào 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ê về bộ chọn cung cấp số liệu thống kê về những bộ chọn quy tắc CSS đã 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 hiệu suất khi bật Số liệu thống kê về bộ chọn
Để xem số liệu thống kê về bộ chọn quy tắc CSS trong các sự kiện Tính toán lại kiểu diễn ra trong thời gian dài, hãy ghi lại dấu vết hiệu suất sau khi bật chế độ cài đặt thu thập Số liệu thống kê của bộ chọn.
Để ghi lại dấu vết hiệu suất bằng số liệu thống kê về bộ chọn, hãy làm như sau:
Mở một trang web, ví dụ: trang trình diễn 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 Hiệu suất, hãy nhấp vào nút cài đặt Cài đặt ghi lại và đánh dấu hộp kiểm Bật số liệu thống kê về bộ chọn CSS.
Nhấp vào radio_button_checked Ghi lại, 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 đó, 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ê về bộ chọn quy tắc CSS cho một sự kiện
Cách xem số liệu thống kê về những 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 dấu vết hiệu suất 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ẻ Thống kê bộ chọn chứa một bảng gồm các bộ chọn CSS. Bảng này hiển thị các thông tin sau cho mỗi bộ chọn CSS:
| Cột | Mô tả |
|---|---|
| Đã trôi qua (mili giây) | Khoảng thời gian mà trình duyệt đã dành để 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 giây. |
| Số lần so khớp | Số lượng phần tử mà công cụ trình duyệt đã cố so khớp với bộ chọn CSS này. |
| Số lượng trùng khớp | Số lượng 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 tối ưu hóa hơn để khớp. |
| Bộ chọn | Bộ chọn CSS đã được so khớp. |
| Biểu định kiểu | Biểu định kiểu CSS chứa bộ chọn CSS. |
Sau khi hoàn tất, trong bảng Hiệu suất, hãy mở phần cài đặt Ghi lại các chế độ cài đặt và xoá hộp kiểm Bật số liệu thống kê về 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ề những 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 Số liệu thống kê về bộ chọn vào một bảng tính như sau:
Ghi lại dấu vết hiệu suất khi bật Số liệu thống kê về bộ chọn.
Tìm sự kiện 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ê về 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 những sự kiện Tính toán lại kiểu khác mà bạn quan tâm.
Sau khi hoàn tất, trong bảng Hiệu suất, hãy mở phần cài đặt Ghi lại các chế độ cài đặt và bỏ chọn hộp kiểm Bật số liệu thống kê về bộ chọn CSS.
Xem số liệu thống kê tổng hợp về bộ chọn quy tắc CSS để có bản ghi đầy đủ
Cách xem số liệu thống kê tổng hợp về những 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 dấu vết hiệu suất khi bật Số liệu thống kê về bộ chọn.
Nhấp vào một vùng trống trên biểu đồ hình ngọn lửa để bỏ chọn bất kỳ sự kiện nào có thể được chọn.
Chọn toàn bộ dải ô ghi. Để thực hiện việc này, hãy nhấp đúp vào biểu đồ CPU ở đầu bảng 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 chứa dữ liệu về tổng số của tất cả các bộ chọn.
Sau khi hoàn tất, trong bảng Hiệu suất, hãy mở phần cài đặt Ghi lại các chế độ cài đặt và bỏ chọn hộp kiểm Bật số liệu thống kê về bộ chọn CSS.
Phân tích số liệu thống kê về 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 chiếm nhiều thời gian nhất, hãy nhấp vào tiêu đề cột Đã trôi qua (mili giây).
Để tìm cách cải thiện hiệu suất của trang web, hãy tập trung vào những bộ chọn CSS:
- Mất nhiều thời gian để tính toán (giá trị Đã trôi qua (mili giây) cao).
- Mà trình duyệt đã cố so khớp nhiều lần (giá trị Số lần thử so khớp cao).
- Mà trình duyệt không thực sự khớp nhiều phần tử cùng với (giá trị Số lần so khớp thấp so với giá trị Số lần so khớp).
- Đường dẫn chậm không khớp với tỷ lệ phần trăm cao.
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 đã thử so 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 cử viên đầu tiên cần cải thiện.
Hãy thử thay đổi bộ chọn CSS để các bộ chọn đó mất ít thời gian hơn để tính toán và so khớp ít phần tử hơn trên trang. Cách cải thiện bộ chọn CSS phụ 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).