Làm thế nào để đo lường phân tích cú pháp CSS và thời gian hiển thị trong trình duyệt?

Question

Tôi có một SPA lớn với một tệp CSS lớn duy nhất chứa nhiều quy tắc. Một số trong số đó đã lỗi thời và cần được refactored hoặc loại bỏ. Nó được biên dịch từ một tập hợp các tệp nguồn SCSS.

Tôi hiện đang sắp xếp lại kiểu và tự hỏi liệu có cách nào để đo lường mất bao lâu để hiển thị trang bằng một số tệp CSS cụ thể.

Giả sử, tôi đang ở điểm bắt đầu, nơi có rất nhiều crap trong CSS và tôi có thể thấy rằng với biểu định kiểu cồng kềnh hiện tại phải mất 2,234 giây để hiển thị ứng dụng.

Sau đó, tôi tái cấu trúc từng bước, áp dụng một số "tối ưu hóa" và trên mỗi bước tôi có thể thấy rằng với một số thay đổi, thời gian hiển thị giảm, trở thành, nói, 2,21 giây và với một số thay đổi khác. , 2,5 giây.

Có cách nào để lấy số liệu đó không?

Answer 1

Sử dụng Công cụ dành cho nhà phát triển bảng điều khiển là được xây dựng trong cho Google Chrome. Nó cũng tương tự như Firefox và Safari với những thay đổi nhỏ rõ ràng ở đây và ở đó. Điều đó sẽ cho bạn biết khi nào tệp đang được tải và cũng mất bao lâu để tải lên.

Take a look at the documentation for Chrome.

Bạn có thể mở Chrome DevTools bằng cách sử dụng Alt + Cmd + I trên macOS hoặc Ctrl + Shift + I trên Windows. Đó là một tài liệu rất toàn diện với tất cả các thông tin ở đó.

Trong trường hợp ai đó hỏi cho phiên bản Firefox , nó được gọi là Waterfall. See here for more information. Một lần nữa, nó rất kỹ lưỡng.