5

Trong khi tìm kiếm các vấn đề hiệu suất trong thư viện JavaScript (đinh tán), tôi thấy rằng việc thu thập rác xảy ra 3-4 lần trong một lần chạy, chiếm ~ 15% thời gian thực hiện (sử dụng Hồ sơ JS DevTools của Chrome).Cách phát hiện phân bổ bộ nhớ đang kích hoạt thu thập rác trong JavaScript?

Có ít nhất 30 địa điểm mà các chức năng/đối tượng tạm thời được tạo ra làm ứng cử viên tiềm năng vì lý do thu gom rác thải.

Tôi muốn biết nếu có cách nào để tìm ra chức năng nào chịu trách nhiệm phân bổ bộ nhớ bị thu gom rác, vì vậy tôi có thể tập trung điều chỉnh hiệu suất của mình.

tôi ghi lại Heap Phân bổ thời gian nhưng nó không phân biệt bộ nhớ đã được thu gom rác thải và vẫn nắm giữ một tài liệu tham khảo (không có thanh màu xám như chỉ trong DevTools doc)

Cũng ghi Heap Phân bổ hồ sơ mà không may mắn.

Trả lời

1

Tại tab Profiles tại DevTools chọn Record Heap Allocation. Gói javascript cần được đánh giá trong một cuộc gọi đến setTimeout() với thời lượng được đặt thành đủ thời gian để nhấp Start trước khi chức năng được chuyển đến setTimeout được gọi; ví dụ:

<!DOCTYPE html> 
<html> 
<head> 
    <script> 
    t = 5; 
    setTimeout(function() { 
     (function test1() { 
     var a = 123; 
     function abc() { 
      return a 
     } 
     abc(); 
     }()); 
    }, 10000) 
    </script> 
</head> 
<body></body> 
</html> 

Khi setTimeout được gọi là thanh màu xanh, có thể theo sau là thanh màu xám sẽ xuất hiện tại dòng thời gian. Nhấp vào Ctr+E để dừng ghi hồ sơ heap.

Chọn thanh màu xanh dương hoặc xám ở biểu đồ mốc thời gian. Chọn Containment tại menu thả xuống trong đó tùy chọn mặc định là Summary. Chọn

[1] :: (GC roots) @n 

nơi n là một số.

Mở rộng lựa chọn bằng cách nhấp vào hình tam giác ở bên trái của [1] :: (GC roots). Chọn một phần tử của [1] :: (GC roots), xem lại các cột được hiển thị Distance, Shallow SizeRetained Size cho lựa chọn.

Để kiểm tra chức năng cụ thể, di chuyển đến

[2] :: (External strings) @n 

đến nơi biến và chức năng cuộc gọi toàn cầu sẽ được liệt kê; ví dụ: "t""setTimeout" từ trên javascrip. Kiểm tra các cột Distance, Shallow SizeRetained Size tương ứng cho lựa chọn này.

+0

Rất cám ơn. Theo hướng dẫn của bạn, tôi đã quản lý để xác định các chức năng cụ thể. Nhưng các giá trị hiển thị trong vùng nông và được giữ lại có vẻ là kích thước của chính hàm đó chứ không phải bộ nhớ được cấp phát khi chạy. Ví dụ: hàm buildBinding (một phương thức của một lớp) có kích thước cạn 144 và kích thước giữ lại 144, giống như các hàm khác. Nhưng chức năng này phân bổ một số đối tượng tạm thời như trong 'var context = pipes.shift(). Split (" <"). Map (trimStr); ' Tôi vẫn không thể tìm thấy, ví dụ, bao nhiêu tôi sẽ tiết kiệm trong bộ nhớ nếu tôi thay đổi việc thực hiện để tránh những đối tượng tạm thời. – blikblum

+0

@blikblum Là 'var context = pipes.shift(). Split (" <"). Map (trimStr);' được liệt kê trên một dòng riêng lẻ tại bảng đầu ra? – guest271314

+0

No. Đó là một phần của bodybuildBinding. Đây là mã thực tế: https://github.com/blikblum/rivets/blob/svelte/dist/rivets.js#L337 – blikblum

Các vấn đề liên quan