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
Nancy Li
LinkedIn

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 ngừng sử dụng Trình phân tích tài nguyên JavaScript? (Trình phân tích tài nguyên JavaScript)

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 như sau:

  • Tính năng này không còn được phát triển tích cực nữa. Trình phân tích tài nguyên JS chưa nhận được bản cập nhật lớn nào trong vài năm qua và nhóm không có đủ tài nguyên để tiếp tục phát triển trình phân tích tài nguyên này.
  • Trải nghiệm lập hồ sơ đơn giản hơn. Bảng điều khiển Hiệu suất đã được dùng cho mọi 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 tốt hơn. Chúng tôi 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à tính năng nâng cao mới, giúp công cụ này trở thành một công cụ phân tích hiệu suất mạnh mẽ và thân thiện với người dùng hơn.

Bạn nên làm gì sau khi ngừng sử dụng?

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

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 nút thắt cổ chai về hiệu suất.

Biểu đồ hình ngọn lửa.

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

Thẻ Từ dưới lên.

Thẻ Cây lệnh gọi.

Làm cách nào để xử lý việc ngừng sử dụng?

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

Ngoài ra, chúng tôi chủ động liên hệ với các chuyên gia phát triển để kiểm thử 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ề việc lập hồ sơ.

Chúng tôi đang từng bước ngừng sử dụng 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ố ý 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ợ tính năng này.
  • Tốc độ tải chậm. Tốc độ tải của bảng điều khiển có vẻ chậm, gây ảnh hưởng đến quá trình phân tích tài nguyên.
  • Thiếu bộ chọn máy ảo JavaScript. Việc không có bộ chọn thực thể máy ảo JavaScript đã hạn chế khả năng lập hồ sơ trong một số trường hợp.

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

Tốc độ tải chậm

Nhà phát triển cho biết bảng điều khiển 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 đã sử 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à thực hiện một số biện pháp tối ưu hoá:

  • 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 nút thắt cổ chai này, chúng tôi đã tăng tốc độ tải 80% cho các tệp lớn! 🎉

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

Thiếu bộ chọn máy ảo JavaScript

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

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

Thẻ Cây lệnh gọi.

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

Trước đây, bảng điều khiển Hiệu suất chỉ hỗ trợ các tệp theo dõi, tức là các tệp JSON có một mảng 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, đây là các tệp có đuôi .cpuprofile chứa một đối tượng JSON. Các tệp này 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 ngăn 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 Hiệu suất và tệp này sẽ tải chính xác.

Ở hậu trường, chúng ta phát hiện sự khác biệt về cấu trúc đối tượng bằng cách sử dụng 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à tệp theo dõi.

Sau khi xác định loại nội dung, chúng tôi sẽ xử lý nội dung đó cho phù hợp. Đối với tệp theo dõi, chúng ta phân tích cú pháp các sự kiện và tạo dòng thời gian. Đố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 phân tích hiệu suất đơn giản hơn, cả đối với 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 có ý kiế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ệ theo một trong các cách sau.

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

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

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

Hãy sử dụng các lựa chọn sau để thảo luận về các tính năng, bản cập nhật mới 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.