Ứng dụng JS nặng của Ajax sử dụng quá nhiều bộ nhớ theo thời gian

Question

Tôi dường như có một số rò rỉ bộ nhớ khá lớn trong ứng dụng mà tôi đang làm việc. Bản thân ứng dụng không phải là rất phức tạp. Cứ sau 15 giây, trang yêu cầu xấp xỉ 40kb JSON từ máy chủ và vẽ một bảng trên trang bằng cách sử dụng nó. Sẽ rẻ hơn khi vẽ bảng vì dữ liệu thường luôn mới. Tôi đính kèm một vài sự kiện vào bảng, khoảng 5 mỗi dòng, 30 dòng trong bảng. Tôi đã sử dụng phương thức .html() của jQuery để đưa html mới vào thùng chứa và ghi đè lên hiện tại. Tôi làm điều này đặc biệt để các chức năng dọn dẹp đặc biệt của jQuery đi vào và cố gắng tách tất cả các sự kiện trên các phần tử trong phần tử mà nó ghi đè lên. Sau đó tôi cũng xóa các biến lớn của html khi chúng được gửi đến DOM bằng cách sử dụng delete my_var.

Tôi đã kiểm tra các tham chiếu vòng tròn và các sự kiện được đính kèm không bao giờ bị xóa một vài lần, nhưng không bao giờ thực sự khai thác nó. Tôi đã tự hỏi nếu ai đó có thể cho tôi một vài gợi ý về cách tối ưu hóa một ứng dụng rất nặng như thế này. Tôi chỉ chọn "Hiệu suất cao Javascript" của Nicholas Zakas, nhưng không có nhiều thời gian để tham gia vào nó.

Để đưa ra ý tưởng về dung lượng bộ nhớ này đang sử dụng, sau 4 ~ giờ, nó đang sử dụng khoảng 420.000k trên chrome và nhiều hơn nữa trên Firefox hoặc IE.

Cảm ơn!

Answer 1

tôi muốn đề nghị viết một phiên bản thử nghiệm của kịch bản của bạn mà không cần sự kiện. Các tham chiếu vòng tròn DOM/JS có thể rất khó phát hiện. Bằng cách loại bỏ một số biến từ phương trình, bạn có thể thu hẹp tìm kiếm của mình một chút.

Answer 2

Tôi đã gặp sự cố tương tự chỉ trong tuần này. Hóa ra tôi có một tham chiếu vòng tròn trong cơ sở dữ liệu của mình. Tôi đã có một mục hàng tồn kho ABC123 được gắn cờ là được thay thế bằng XYZ321 và tôi cũng đã có XYZ321 được gắn cờ là đang được thay thế bởi ABC123. Đôi khi tham chiếu vòng tròn không có trong mã PHP.

Answer 3

Tôi đã trải nghiệm điều tương tự. Tôi đã có một đoạn mã được kiểm tra 10 giây một lần và lấy ra một số lỗi của người dùng hiện tại (nhập/kiểm tra dữ liệu), một số nguyên đơn giản. Điều này sau đó được sử dụng để thay thế văn bản bên trong một div (để người dùng biết khi nào các lỗi mới được tìm thấy trong công việc của họ). Nếu bỏ qua đêm, trình duyệt sẽ kết thúc bằng cách sử dụng hơn 1gb bộ nhớ!

Gần nhất tôi đến để giải quyết vấn đề là giảm việc bỏ phiếu xảy ra cứ sau 2 phút thay vào đó và yêu cầu người dùng đóng cửa vào cuối ngày. Một giải pháp tốt hơn vẫn là sử dụng Ajax Push Engine để đẩy dữ liệu vào trang CHỈ khi một lỗi được tạo ra. Điều này sẽ dẫn đến dữ liệu được gửi ít thường xuyên hơn và do đó ít bộ nhớ hơn được sử dụng.

Answer 4

Bạn có đang lưu bất kỳ thứ gì vào abject/array không? Tôi đã có điều này xảy ra trước đây với một plugin chrome, nơi một mảng chỉ tiếp tục nhận được lớn hơn và lớn hơn. Điều này nghe có vẻ như nó có thể là vấn đề của bạn, đặc biệt là xem xét bạn đang tìm nạp 40k.

Answer 5

Đoạn trích sẽ tuyệt vời như thể bạn đang tạo biến mới mỗi lần và các biến cũ không bị loại ra khỏi phạm vi do đó không bị thu gom rác.

Đồng thời thử và đóng gói thêm JS của bạn bằng cách sử dụng các hàm tạo và các đối tượng của các đối tượng ect. Khi JS chỉ là một danh sách các hàm và tất cả các biến có phạm vi toàn cục thay vì là các thuộc tính của một cá thể, JS của bạn có thể chiếm nhiều bộ nhớ.

Answer 6

Tại sao không vẽ bảng và chỉ đính kèm các sự kiện một lần và chỉ thay thế dữ liệu bảng sau mỗi 15 giây?

Answer 7

1) Jquery Ajax wrapper, được gọi là định kỳ, dẫn đến rò rỉ bộ nhớ và cộng đồng là nhận thức được rằng (mặc dù các vấn đề trên wrapper ajax không phải là bằng cách xa như xấu xí như trường hợp của bạn).

2) Khi nói đến tối ưu hóa, bạn đã thực hiện bước đầu tiên (sử dụng các cuộc gọi json nhẹ) và phương pháp xóa, nhưng vấn đề nằm trong vùng "đính kèm sự kiện" và phương thức html.

Ý của tôi là: 1) có thể bạn đang gắn lại trình nghe sau mỗi lần gọi html() 2) bạn vẽ lại bảng lỗ trên mỗi cuộc gọi ajax. Điều này thực sự dẫn đến rò rỉ bộ nhớ.

Bạn cần phải: 1) vẽ bảng (với nội dung lần đầu tiên) ở phía máy chủ 2) $ (document) .ready bạn đính kèm nghe đến các tế bào của bảng 3) dịch vụ cuộc gọi json với ajax, phân tích phản ứng 4) nạp bảng với dữ liệu mảng phân tích cú pháp

Hãy cho chúng tôi những gì bạn đã achived trong khi đó :)