Công cụ thống kê, đánh giá hiệu năng JS

38 lượt xem

Trên 1 trang web bằng reactjs. Em muốn tìm hiểu xem function nào tốn nhiều mem, thời gian bị blocking bao lâu. Mọi người recommend tools hoặc extension nào để kiểm tra và thống kê vấn đề này giúp em với

Đánh giá câu hỏi ngay!

Hãy ấn Up Vote với những câu hỏi cụ thể và chi tiết

Hãy ấn Down Vote với những câu hỏi chưa rõ ràng Careerly sẽ nhắc người hỏi chỉnh sửa lại.

1 câu trả lời

BEST

Ảnh đại diện của Tín Nguyễn

Dùng React Dev Tools nha, nó có tab Profiler, bạn có thể dùng nó để đó các component được render các thứ như thế nào. Có rất nhiều tính năng hữu ích như: - Hiển thị các thanh bar, mỗi thanh ứng với một commit phase để bạn dễ hình dung - Hiển thị thời gian render của 1 Component bất kỳ, cũng như thời gian nó được commit (ánh xạ vào DOM) - Các Component vẫn được hiển thị lồng nhau nên rất dễ để quan sát - Hỗ trợ hiển thị các Component tốn nhiều thời gian render nhất, sẽ hiển thị màu vàng, và thanh bar sẽ dài Bạn có thể tham khảo kĩ hơn tại đây: https://legacy.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html Hoặc có thể sử dụng Component <Profiler> từ React để wrap các component cần đo, này thì thiên về code hơn. Có thể tham khảo kĩ hơn tại đây: https://react.dev/reference/react/Profiler Ở trên là về React, còn về JavaScript các thứ thì có thể dùng Profiling của Web Browser. Mở Dev Tool thì sẽ thấy tab Performance. Ở đây bạn có thể record và xem các thông số về CPU, GPU, JS Heap Size …

Ảnh đại diện của Nguyễn Thanh Tùng

Nguyễn Thanh Tùng

Người viết

Viettel High Tech Software EngineerNgày 7 tháng 07 năm 2023

Cảm ơn anh :) Sau khi đau đầu mấy hôm thì em đã dùng cái Profiling của Web Browser :D. Vì dùng cái profiler của react ngốn ram quá toàn sập luôn web 🤣🤣😂

Đăng ký ngay bây giờ để đọc toàn bộ câu trả lời!

Cộng đồng lập trình viên sẽ giải đáp tường tận cho bạn.

Xem thêm

Đồng ý với Điều khoản dịch vụ Chính sách bảo mật của Careerly

Bạn đã có tài khoản rồi?

Đăng ký ngay bây giờ để đọc toàn bộ câu trả lời!

Cộng đồng lập trình viên sẽ giải đáp tường tận cho bạn.