Câu hỏi của tôi là về Chrome DevTools, cụ thể là tôi có câu hỏi về tab Dòng thời gian. Vì vậy, như tôi đã đọc nhiều lần, trình duyệt của tôi phải có tốc độ 60fps hiển thị pixel của tôi. Đôi khi mặc dù nó có một số thực thi JS nặng và ngăn chặn 60fps xảy ra. Ngoài ra nếu tôi có một số CSS và JS mà gây ra tính toán lại và sơn lại của cây DOM (một phần hoặc cây đầy đủ) nó cũng có thể mất hơn ~ 16ms cho một khung. Dưới đây là hình ảnh của một khung dài từ ứng dụng của chúng tôi:Làm thế nào để hiểu tiến trình devtools đúng cách?
Ok, ở đây tôi có thể thấy rõ, đó là hai yêu cầu mất quá nhiều thời gian (192ms + 14ms), trình duyệt có thể không vẽ 60fps và nó thậm chí không đến gần.
Mặc dù đây là một bức tranh:
Vì vậy, nó là tốt hơn nhiều bây giờ. Bây giờ là ~ 42fps. Nhưng Bây giờ tôi không thể hiểu tại sao ..
Tôi có vài lần "cập nhật lớp cây" và "sơn" dịp. Một số sự kiện chuột, nhưng tất cả chúng là < = 1ms tại đây.
Có 12 "sự kiện" như vậy trong khung này. 10 trong số đó thậm chí còn ít hơn 0.30ms, vì vậy nếu tôi tổng hợp tất cả, nó chắc chắn sẽ ít hơn 16ms (3.57, nếu tôi đếm chính xác), nhưng Chrome cho biết khung này là 23.9ms.
Tại sao Dòng thời gian cho biết tôi có rác ở đây? Tôi nên làm gì để loại bỏ nó và làm thế nào để biết được nút cổ chai ở đâu?
Tôi hơi bối rối ở đây, bởi vì tôi chắc chắn bỏ lỡ điều gì đó trong việc kiểm tra dòng thời gian .. Vì vậy, vui lòng cho tôi một số giải thích chi tiết hoặc một số hướng dẫn chi tiết về cách loại bỏ các "junks" và cách phát hiện chúng . Mặc dù tôi đã đọc vài bài viết và hầu như đã hoàn thành Udemy khóa học về hiệu suất, tôi vẫn còn lẫn lộn ..
Cảm ơn bạn
Cảm ơn câu trả lời của bạn! Điều này có ý nghĩa, nhưng làm thế nào tôi có thể biết tại sao điều này xảy ra một lần và thời gian khác nó không xảy ra? Và làm thế nào để thoát khỏi nó? – aprok