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 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:

  • 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 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 phân tích hiệu suất của 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 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 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 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ố ý 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 đã 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

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 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ể đó.

Thẻ Cây cuộc 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, 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 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 các 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á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, cho phép bạn kiểm thử các API nền tảng web tiên tiến và giúp bạn phát hiện các vấn đề trên trang web của mình trước người dùng!

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.