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 của CPU 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 dẫn đến:

  • Chúng tôi không còn tích cực phát triển API này 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 và nhóm không có tài nguyên để tiếp tục phát triển trình phân tích 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 sử 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, 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 Hiệu suất tốt hơn. Chúng tôi sẽ tiếp tục cải thiện giải pháp 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 công cụ phân tích hiệu suất mạnh mẽ và thân thiện hơn với người dùng.

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 của CPU JavaScript, hãy xem bài viết Phân tích hiệu suất của 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 của hiệu suất.

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

  • Sử dụng 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.

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

Thẻ Cây cuộc 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à xuất bản công khai Yêu cầu nhận xét (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ũng 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 đề nhằm đảm bảo bảng Hiệu suất đáp ứng các nhu cầu về lập hồ sơ cốt lõi.

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 trong 4 giai đoạn để các 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, các 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ợ công cụ 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 cản trở cho quá trình phân tích.
  • Thiếu bộ chọn máy ảo JavaScript. Việc không có bộ chọn phiên bản máy ảo JavaScript đã làm hạn chế khả năng lập hồ sơ trong một số trường hợp.

Hãy cùng tìm hiểu từng vấn đề này và xem cách chúng tôi khắc phục.

Tốc độ tải chậm

Các nhà phát triển cho chúng tôi biết rằng 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 bảng điều khiển 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 công cụ này 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 đã tìm thấy vấn đề và thực hiện một số 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 hàm lặp lại (cho vòng lặp) để 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ải các tệp lớn nhanh hơn 80%! 🎉

Đọ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 tính năng nhận biết.

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

Nguyên mẫu ban đầu bị 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 phân tích một thực thể 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. Màn hình cho thấy một 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 điều khiển Performance (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 Performance (Hiệu suất) chỉ hỗ trợ các tệp theo dõi. Đây là các tệp JSON có một mảng 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ợ các hồ sơ CPU, tức là các tệp có đuôi .cpuprofile chứa đối tượng JSON. Chúng 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 mới cho phép nhà phát triển phân tích cpuprofile hiện có. Do đó, bảng điều khiển Performance (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 phần Hiệu suất và tệp sẽ tải đúng cách.

Trên thực tế, 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 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 đó tương ứng. Đố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à 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 Performance (Hiệu suất) để có trải nghiệm phân tích tài nguyên đơn giản hơn, cho cả trang web và việc phân tích hiệu suất của 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ề lỗi này hoặc liên hệ với chúng tôi bằng một trong những cách sau.

Tải 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 cung cấp cho bạn quyề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, thử nghiệm API nền tảng web tiên tiến và tìm ra sự cố trên trang web của bạn trước khi người dùng của bạn 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 đây để thảo luận về các tính năng mới và thay đổi trong bài đăng hoặc bất cứ vấn đề nào khác liên quan đến Công cụ cho nhà phát triển.

  • Hãy 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ủa Công cụ cho nhà phát triển bằng cách sử dụng phần Tuỳ chọn khác   Thêm   > Trợ giúp > Báo cáo sự cố về Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
  • Tweet tại @ChromeDevTools.
  • Hãy để lại bình luận về tính năng mới trong video trên YouTube của Công cụ cho nhà phát triển hoặc video trên YouTube.