Tạm biệt Trình phân tích tài nguyên JS, phân tích CPU bằng bảng điều khiển Hiệu suất

Jecelyn Yeen

Nancy Li

Bảng điều khiển Trình phân tích tài nguyên JavaScript sẽ ngừng hoạt động trong Chrome 124. Từ giờ trở đi, hãy sử dụng bảng điều khiển Hiệu suất để phân tích hiệu suất CPU của Node.js.

Tại sao chúng tôi không dùng Trình phân tích tài nguyên JavaScript nữa? (Trình phân tích tài nguyên JS)

Ngay từ Chrome 58, nhóm Công cụ cho nhà phát triển đã lên kế hoạch ngừng sử dụng Trình phân tích tài nguyên JS. Có một số lý do khiến:

• Ứng dụng này không còn được tích cực phát triển nữa. Trình phân tích tài nguyên JS chưa nhận được bất kỳ bản cập nhật lớn nào trong vài năm và nhóm này không có nguồn lực để tiếp tục phát triển công cụ này.
• Trải nghiệm lập hồ sơ đơn giản hơn. Bảng Hiệu suất đã được dùng cho tất cả các loại phân tích hiệu suất, và với khả năng lập hồ sơ hiệu suất CPU JavaScript trong Node.js, bạn nên hợp nhất mọi thứ ở cùng một nơi để đảm bảo tính nhất quán và hiệu quả.
• Bảng điều khiển Hiệu suất sẽ tốt hơn. Chúng tôi sẽ tiếp tục cải thiện công cụ này bằng cách bổ sung các tính năng và điểm cải tiến mới, giúp công cụ này trở thành một công cụ mạnh mẽ và thân thiện với người dùng hơn trong việc phân tích hiệu suất.

Bạn nên làm gì sau khi sản phẩm này ngừng hoạt động?

Để tìm hiểu thêm về cách phân tích hiệu suất của CPU JavaScript, hãy xem bài viết Hiệu suất Node.js trong hồ sơ.

Dưới đây là một số mẹo sử dụng bảng điều khiển Hiệu suất:

• Sử dụng biểu đồ hình ngọn lửa để xác định điểm tắc nghẽn về hiệu suất.

• Sử dụng các thẻ Từ dưới lên và Cây cuộc gọi để hiểu mối quan hệ giữa các hàm.

Chúng tôi xử lý việc ngừng sử dụng như thế nào?

Chúng tôi phát triển một nguyên mẫu và xuất bản công khai Yêu cầu bình luận (RFC) trên GitHub để thu thập ý kiến phản hồi của các nhà phát triển.

Ngoài ra, chúng tôi còn chủ động liên hệ với các chuyên gia nhà phát triển để thử nghiệm nguyên mẫu, giải quyết mọi mối lo ngại hoặc vấn đề để đảm bảo rằng bảng điều khiển Hiệu suất đáp ứng các nhu cầu cốt lõi về lập hồ sơ.

Chúng tôi đang từng bước loại bỏ Trình phân tích tài nguyên JS theo 4 giai đoạn để nhà phát triển có đủ thời gian điều chỉnh và áp dụng.

Các vấn đề chính và cách chúng tôi khắc phục

Trong số các ý kiến phản hồi mà chúng tôi nhận được, những mối lo ngại cấp bách nhất tập trung vào 3 vấn đề chính:

• Hỗ trợ định dạng tệp .cpuprofile. Trình phân tích tài nguyên JS sử dụng một định dạng tệp khác. Bảng điều khiển Hiệu suất sẽ hỗ trợ bảng điều khiển này.
• Tốc độ tải chậm. Tốc độ tải của bảng điều khiển có vẻ chậm, cản trở quá trình lập hồ sơ.
• Thiếu bộ chọn máy ảo JavaScript. Việc không có bộ chọn thực thể máy ảo JavaScript làm hạn chế khả năng phân tích tài nguyên trong một số trường hợp.

Hãy cùng xem xét từng vấn đề trong số này và xem cách chúng tôi khắc phục chúng.

Tốc độ tải chậm

Các nhà phát triển cho chúng tôi biết bảng Hiệu suất mất quá nhiều thời gian để tải các tệp dữ liệu lớn và đôi khi thậm chí còn gặp sự cố.

Chúng tôi dùng Công cụ cho nhà phát triển để phân tích Công cụ cho nhà phát triển (chúng tôi gọi đó là "Công cụ cho nhà phát triển trên Công cụ cho nhà phát triển"). Chúng tôi đã phát hiện thấy vấn đề và đã tối ưu hoá một số điểm như sau:

• Thay thế Set bằng cấu trúc dữ liệu Array.
• Xoá các cấu trúc dữ liệu Map không cần thiết.
• Tái cấu trúc các hàm đệ quy thành lặp lại (vòng lặp for) để giảm mức sử dụng ngăn xếp bộ nhớ.

Bằng cách khắc phục những điểm tắc nghẽn này, chúng tôi đã giúp quá trình tải nhanh hơn 80% đối với các tệp lớn! 🎉

Đọc thêm về những điều chúng tôi tìm hiểu được trong bài đăng này trên blog: Bảng điều khiển Hiệu suất nhanh hơn 400% nhờ nhận thức.

Bộ chọn máy ảo JavaScript bị thiếu

Nguyên mẫu ban đầu thiếu bộ chọn máy ảo JavaScript. Các nhà phát triển sử dụng báo cáo này để xem chi tiết và tập trung vào việc phân tích một thực thể máy ảo cụ thể.

Chúng tôi hiện đã thêm một bộ chọn máy ảo JavaScript vào bảng điều khiển Hiệu suất. Trang này cho thấy danh sách thả xuống gồm tất cả các phiên bản máy ảo JavaScript hiện có. Khi bạn chọn một phiên bản, bảng Hiệu suất sẽ tải hồ sơ CPU cho phiên bản cụ thể đó.

Hỗ trợ định dạng tệp cpuprofile

Trước đây, bảng điều khiển Hiệu suất chỉ hỗ trợ tệp theo dõi, là các tệp JSON chứa một loạt các sự kiện theo dõi.

Mặt khác, Trình phân tích tài nguyên JS hỗ trợ hồ sơ CPU, là các tệp có đuôi .cpuprofile chứa đối tượng JSON. Các thành phần này sẽ có dạng như sau:

{
    // The list of profile nodes. First item is the root node.
    nodes: ProfileNode[];
    // Profiling start timestamp in microseconds.
    startTime: number;
    // Profiling end timestamp in microseconds.
    endTime: number;
    // Ids of samples at top nodes.
    samples?: integer[];
    // Time intervals between adjacent samples in microseconds.
    // The first delta is relative to the profile startTime.
    timeDeltas?: integer[];
}

Quy trình công việc mới không được cản trở nhà phát triển phân tích cpuprofile hiện có. Do đó, bảng điều khiển Hiệu suất hiện hỗ trợ cả tệp theo dõi và hồ sơ CPU. Bạn có thể nhập tệp cpuprofile vào tệp Hiệu suất và tệp này sẽ tải đúng cách.

Đằng sau đó, chúng tôi phát hiện sự khác biệt về cấu trúc đối tượng bằng cách sử dụng một biểu thức chính quy. Nếu nội dung tệp bắt đầu bằng {"nodes":[ thì đó là hồ sơ CPU. Nếu không, đó là một tệp theo dõi.

Sau khi xác định được loại nội dung, chúng tôi sẽ xử lý nội dung đó một cách phù hợp. Đối với tệp theo dõi, chúng tôi phân tích cú pháp các sự kiện và xây dựng tiến trình. Đối với hồ sơ CPU, chúng ta phân tích cú pháp đối tượng JSON và tạo biểu đồ hình ngọn lửa.

Kết luận

Sử dụng bảng điều khiển Hiệu suất để có trải nghiệm lập hồ sơ tinh giản hơn, dành cho cả trang web và phân tích hiệu suất CPU trong các ứng dụng Node.js và Deno.

Nếu bạn muốn phản hồi hoặc đề xuất, hãy thêm nhận xét vào lỗi này hoặc liên hệ bằng một trong các lựa chọn sau.

Tải kênh xem trước xuống

Hãy cân nhắc việc sử dụng Chrome Canary, Nhà phát triển hoặc Beta làm trình duyệt phát triển mặc định của bạn. Các kênh xem trước này cho phép bạn truy cập vào các tính năng mới nhất của Công cụ cho nhà phát triển, kiểm thử các API nền tảng web tiên tiến và tìm ra các vấn đề trên trang web của bạn trước khi người dùng làm điều đó!

Liên hệ với nhóm Công cụ của Chrome cho nhà phát triển

Sử dụng các lựa chọn sau để thảo luận về các tính năng và thay đổi mới trong bài đăng, hoặc bất kỳ nội dung nào khác liên quan đến Công cụ cho nhà phát triển.

• Gửi đề xuất hoặc phản hồi cho chúng tôi qua crbug.com.
• Báo cáo sự cố Công cụ cho nhà phát triển bằng cách sử dụng Tuỳ chọn khác   > Trợ giúp > Báo cáo vấn đề về Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
• Tweet tại @ChromeDevTools.
• Để lại bình luận về Tính năng mới của chúng tôi trong Video trên YouTube hoặc Mẹo trong Công cụ cho nhà phát triển Video trên YouTube.