Làm cách nào để giảm thiểu việc sử dụng bộ nhớ dư thừa trong trình duyệt khi tải dữ liệu không đồng bộ?

Question

Tôi đang hỗ trợ một ứng dụng dựa trên trình duyệt HTML/JS tải không đồng bộ dữ liệu (SVG) khi người dùng duyệt xung quanh trong ứng dụng. (Ứng dụng này là một trình đọc sách điện tử, nhưng trường hợp sử dụng cũng tương tự như một ứng dụng bản đồ trực tuyến). Về mặt lý thuyết, người dùng có thể yêu cầu nhiều dữ liệu hơn RAM có sẵn, nếu họ dành nhiều thời gian sử dụng ứng dụng, vì lượng dữ liệu có thể tải xuống tổng thể lớn (GB, nhưng chỉ 10s của K cho mỗi yêu cầu, tức là mỗi SVG)

Tôi đã có báo cáo về một số người dùng gặp sự cố chậm, trình duyệt bị treo vv sau thời gian sử dụng kéo dài. Không có sự nhất quán trong trình duyệt hoặc hệ điều hành.

Điều này dẫn đến một số câu hỏi liên quan:

1. Có bất kỳ "thực hành tốt" với loại hình ứng dụng, bằng cách nào đó loại bỏ dữ liệu cũ hoặc ít thường được sử dụng từ bộ nhớ, trong một phiên? Làm thế nào chính xác (trong JS) này sẽ được thực hiện? Có đủ để loại bỏ một phần tử khỏi DOM có chứa SVG không, cho bộ nhớ được sử dụng bởi SVG đó sẽ được phát hành không? Điều này có cần thiết không?

2. Điều gì xảy ra chính xác với các trình duyệt chính (Chrome, FF, IE8/9/10 ...) khi lượng dữ liệu được yêu cầu không đồng bộ vượt quá bộ nhớ khả dụng? Nó chỉ là một trường hợp phân trang đĩa cứng?

3. Có bất kỳ thử nghiệm nào có thể được thực hiện trong Javascript để biết khi nào "đã đạt quá nhiều dữ liệu" không? ví dụ. giàn khoan phát triển của tôi có lượng RAM lớn và vì vậy tôi không nhận thấy vấn đề này, nhưng trên các thiết bị thử nghiệm (và một số máy người dùng) có RAM ít hơn nhiều và vấn đề được tìm thấy sớm hơn (nhưng không phải mọi lần, và không dễ lặp lại, khó chịu).

Answer 1

Các vấn đề về bộ nhớ JavaScript thường ít có liên quan đến dữ liệu không đồng bộ và nhiều việc phải làm với dọn dẹp thích hợp.

Mặc dù JavaScript được thu thập rác, bạn vẫn có thể tạo rò rỉ bộ nhớ. Bộ nhớ được chia giữa DOM và JavaScript. Nếu bất cứ điều gì từ một bên 'là tham chiếu khác, nó không thể được GC'd cho đến khi nó hoàn toàn được giải phóng của tất cả các tài liệu tham khảo cyclic giữa hai.

Ví dụ thực tế về điều này: Nếu bất kỳ trình xử lý sự kiện nào được đính kèm với phần tử DOM, DOM hiện có tham chiếu đến gọi lại JS. Nếu cùng một cuộc gọi lại cũng có tham chiếu đến cùng một đối tượng DOM được lưu trữ trong một biến, nó sẽ ngăn chặn cây DOM có liên quan VÀ bất kỳ bộ nhớ/đóng cửa nào từ cuộc gọi lại JavaScript từ GC'd. Trong trường hợp này, trang sẽ bị rò rỉ ngay cả khi phần tử DOM được xóa khỏi cây và bạn không có tham chiếu đến cuộc gọi lại JavaScript!

• Dưới đây là liên kết từ trang web của Douglas Crockford với một lời giải thích tốt hơn với các ví dụ: http://javascript.crockford.com/memory/leak.html

Một trong những lý do jQuery sử dụng $() chức năng là để bọc DOM đối tượng tài liệu tham khảo tránh người dùng có tài liệu tham khảo trực tiếp đến các đối tượng DOM trong mã của bạn. Nó không có nghĩa là bạn sẽ không tạo ra rò rỉ nếu bạn không nhìn ra ngoài. Bởi vì các gói, bạn có thể tạo ra rò rỉ nếu bạn không luôn luôn đi qua các wrapper để làm thao tác DOM/dọn dẹp.

• Dưới đây là một hướng dẫn phong nha giải thích bạn có thể tránh bị rò rỉ với mã jquery: http://javascript.info/tutorial/memory-leaks

Với tất cả các cách khác nhau mà bạn có thể tạo ra rò rỉ, cách tốt nhất là sử dụng một công cụ để chẩn đoán nếu rò rỉ bộ nhớ là một vấn đề cho bạn. Các công cụ dành cho Chrome cho phép bạn lập hồ sơ ứng dụng của mình và xem cách hoạt động của bộ nhớ/đang được sử dụng. Nó thậm chí có thể cho bạn biết những gì tài liệu tham khảo không được làm sạch sau khi GC.

• Dưới đây là phần giới thiệu tốt về vấn đề bộ nhớ javascript và profiler của công cụ dev. Nó đưa bạn đi qua như thế nào GMail sử dụng công cụ này để sửa chữa các vấn đề tương tự như bạn đang phải đối mặt: http://www.html5rocks.com/en/tutorials/memory/effectivemanagement/

Nếu bạn tìm không có rò rỉ bộ nhớ và bộ nhớ ứng dụng của bạn là quá lớn, có một vài kỹ thuật mà bạn có thể làm; tải nội dung tải xuống, sử dụng lại DOM hiện có bằng cách sao chép mẫu, sử dụng gọi lại sự kiện để bắt các sự kiện khi chúng bong bóng thay vì gắn với tất cả trẻ em, v.v.