Phân tích các trường hợp rò rỉ bộ nhớ bằng tác nhân AI

Matthias Rohmer
José Luis Zapata

Chrome DevTools cho tác nhân cho phép tác nhân mã hoá của bạn phân tích và khắc phục tình trạng rò rỉ bộ nhớ phía máy khách (bao gồm cả JavaScript và WebAssembly) trong ứng dụng. Bằng cách tự động hoá việc thu thập và phân tích ảnh chụp nhanh heap, tác nhân của bạn có thể xác định chính xác những đối tượng không được thu gom rác đúng cách và đề xuất tái cấu trúc mã có mục tiêu.

Trong quy trình làm việc dựa trên tác nhân, tác nhân lập trình sẽ chụp nhiều ảnh nhanh ở các trạng thái ứng dụng khác nhau và sử dụng các công cụ phân tích chuyên biệt.

Các mẫu rò rỉ bộ nhớ phổ biến

Phân tích bộ nhớ tập trung vào việc tìm ra các mẫu rò rỉ phổ biến, bao gồm:

  • Trình nghe sự kiện chưa xoá: Trình nghe sự kiện được đính kèm vào các đối tượng chung (chẳng hạn như window hoặc document) ngăn chặn quá trình thu thập rác.
  • Các nút DOM tách rời: Các nút bị xoá khỏi cây tài liệu nhưng vẫn được một biến JavaScript tham chiếu.
  • Biến toàn cục không chủ ý: Các biến được khai báo mà không có phạm vi thích hợp và tồn tại vĩnh viễn trong bộ nhớ.
  • Đóng: Đóng các đối tượng vô tình giữ lại các tham chiếu đến các đối tượng lớn trong phạm vi của riêng chúng.
  • Cấu trúc dữ liệu không giới hạn: Cấu trúc dữ liệu dùng để lưu vào bộ nhớ đệm và phát triển không giới hạn.

Những điểm cần cân nhắc khi phân tích bộ nhớ

Khi sử dụng tính năng phân tích bộ nhớ, hãy lưu ý những điều sau:

  • Không đọc trực tiếp các ảnh chụp nhanh thô: Đừng để tác nhân đọc trực tiếp các tệp .heapsnapshot thô. Chúng quá lớn và vượt quá giới hạn ngữ cảnh. Kỹ năng gỡ lỗi rò rỉ bộ nhớ hướng dẫn rõ ràng cho các tác nhân để tránh đọc những tệp này.

  • Phương pháp 3 ảnh chụp nhanh: Để tìm ra các rò rỉ một cách đáng tin cậy, tác nhân của bạn thường cần chụp 3 ảnh chụp nhanh: một ảnh chụp nhanh cơ sở trước khi thực hiện hành động, một ảnh chụp nhanh mục tiêu sau khi thực hiện hành động và một ảnh chụp nhanh cuối cùng sau khi đảo ngược hành động. Xin lưu ý rằng một số hành động, chẳng hạn như hành động do bộ hẹn giờ (setTimeout) hoặc ảnh động (requestAnimationFrame) kích hoạt, sẽ xảy ra mà không có sự tương tác của người dùng và có thể không yêu cầu bước đảo ngược.

    Xin lưu ý rằng một số hành động, chẳng hạn như những hành động do bộ hẹn giờ (setTimeout) hoặc ảnh động (requestAnimationFrame) kích hoạt, sẽ xảy ra mà không cần người dùng tương tác và vẫn có thể làm tăng mức sử dụng bộ nhớ.

  • Xác minh trước khi sửa: Luôn xem xét các phát hiện của tác nhân để đảm bảo các hành động được đề xuất của tác nhân có thể áp dụng và chính xác cho logic của ứng dụng. Ví dụ: xác nhận xem một nút tách rời có nằm trong bộ nhớ đệm có chủ ý hay không trước khi hướng dẫn tác nhân vô hiệu hoá các tham chiếu.

Các trường hợp sử dụng để phân tích rò rỉ bộ nhớ

Hướng dẫn tác nhân của bạn lập hồ sơ bộ nhớ trong các hành động lặp lại, bao gồm cả bộ hẹn giờ và lượt tương tác của người dùng, thay vì chụp nhanh và so sánh chúng theo cách thủ công. Tích hợp tính năng phân tích bộ nhớ vào quy trình gỡ lỗi bằng các quy trình sau.

Lưu ý: Các bước thực thi của tác nhân là ví dụ về hành vi tiềm ẩn. Tác nhân của bạn có thể hành động theo cách khác.

Phát hiện trình nghe sự kiện chưa được xoá trong quá trình điều hướng

Các ứng dụng trang đơn (SPA) thường bị rò rỉ bộ nhớ khi nhà phát triển quên xoá trình nghe sự kiện chung sau khi một thành phần huỷ gắn kết. Bạn có thể giao cho tác nhân của mình nhiệm vụ xác minh rằng bộ nhớ được giải phóng đúng cách khi điều hướng giữa các khung hiển thị.

Câu lệnh mẫu:

Navigate from the home page to the dashboard and back to the home page. Use the take_heapsnapshot tool to check if we have any uncleared event listeners causing memory leaks.

Ví dụ về quá trình thực thi tác nhân: Tác nhân của bạn chụp nhanh một heap cơ sở trên trang chủ, chuyển đến trang tổng quan rồi chuyển về trang chủ để chụp nhanh lần cuối. Sau đó, công cụ này sử dụng các công cụ phân tích nội bộ để đánh giá các ảnh chụp nhanh, phát hiện thấy rằng một trình nghe scroll được đính kèm vào đối tượng window chưa bao giờ được xoá và cung cấp mã cụ thể để gọi removeEventListener trong hàm dọn dẹp của thành phần.

Xác định các nút DOM đã tách trong thành phần giao diện người dùng

Các thành phần giao diện người dùng phức tạp, trình đơn thả xuống và phương thức thường để lại các nút DOM tách biệt nếu các tham chiếu đến chúng được giữ trong các biến JavaScript sau khi bị xoá khỏi DOM.

Câu lệnh mẫu:

Open the user settings modal and close it 5 times. Analyze the heap snapshots and tell me if there are any detached DOM nodes left behind. If there are, ask me if they are intentional before writing a fix.

Ví dụ về quá trình thực thi tác nhân: Tác nhân của bạn tương tác với phương thức cài đặt trong khi thu thập các ảnh chụp nhanh cơ sở, mục tiêu và ảnh chụp nhanh cuối cùng cần thiết. Phân tích cho thấy một số đối tượng đang tăng lên được gắn nhãn là Detached HTMLDivElement. Tác nhân thông báo cho bạn về kết quả tìm được và yêu cầu bạn xác nhận trước khi thay đổi mã để đặt các biến chứa các tham chiếu DOM thành null.

Tìm bộ nhớ đệm không giới hạn trong các hoạt động tương tác liên tục

Các tính năng như cuộn vô hạn hoặc tìm nạp dữ liệu liên tục có thể làm rò rỉ bộ nhớ nếu các mảng hoặc bản đồ cơ bản tăng vô hạn mà không có giới hạn.

Câu lệnh mẫu:

Scroll down the infinite feed list to load more items three times. Check if our LRU cache is unbounded and leaking memory, and suggest a fix.

Ví dụ về việc thực thi tác nhân: Tác nhân của bạn phân tích trạng thái bộ nhớ trước và sau khi cuộn. Nó xác định một bao đóng vô tình nắm bắt một mảng lớn phát triển không giới hạn. Tác nhân đề xuất triển khai các giới hạn lưu vào bộ nhớ đệm hoặc sử dụng WeakMap cho dữ liệu được liên kết với vòng đời đối tượng để cho phép thu gom rác đúng cách.

Gỡ lỗi rò rỉ bộ nhớ trong các quy trình ở chế độ nền

Hoạt ảnh và bộ hẹn giờ nền có thể làm rò rỉ bộ nhớ mà không cần người dùng tương tác một cách rõ ràng. Bạn có thể hướng dẫn tác nhân theo dõi mức tăng bộ nhớ theo thời gian để tìm ra tình trạng rò rỉ bộ nhớ cho các quy trình này.

Câu lệnh mẫu:

Explore this canvas application and monitor memory usage. Help me determine areas of improvement around reusing objects and textures.

Ví dụ về quá trình thực thi tác nhân: Tác nhân của bạn khám phá ứng dụng canvas và tự động chụp ảnh nhanh định kỳ để theo dõi mức sử dụng bộ nhớ theo thời gian. Công cụ này phân tích vùng nhớ và xác định rằng vòng lặp kết xuất đẩy các lưới WebGL mới vào một mảng trên mọi khung hình mà không thu thập rác các lưới trước đó, đề xuất các hoạt động tối ưu hoá để sử dụng lại đối tượng.