Chrome DevTools khung thời gian sự kiện

Question

Tôi đang sử dụng Chrome để cô lập cổ chai trong hoạt ảnh của một ứng dụng.

Nó cho thấy khung hình mất khoảng 20 + ms quá chậm. Nhưng khi tôi mở rộng khung hình để xem những gì đang diễn ra, nó cho tôi thấy một cuộc gọi jQuery lấy 20 + ms, nhưng sự kiện Tính toán lại thực tế mất ít hơn 5ms.

Làm cách nào để tìm hiểu nguyên nhân gây ra sự chậm trễ đó? Tôi không thể nhìn thấy những gì 15ms khác

Tổng thời gian sự kiện:

Các "Tính toán lại Style" sự kiện trong phạm vi chức năng jQuery

ngăn xếp trước khi " Tính toán lại kiểu "

Answer 1

Các sự kiện lồng nhau khác tạo nên tổng số 22.93ms sẽ được liệt kê ngay sau sự kiện Tính toán lại. Ví dụ, dưới đây bạn có thể thấy rằng có một cuộc gọi chức năng trong đó có tổng cộng 9ms. Số màu tía hiển thị thời gian hiển thị và số màu vàng hiển thị thời gian ghi.

Nếu bạn bỏ qua những cửa sổ bật lên, bạn có thể thấy rằng tất cả các sự kiện mà chiếm cuộc gọi được trình bày chi tiết bên dưới nó.