jQuery hoặc javascript để tìm mức sử dụng bộ nhớ của trang

Có cách nào để tìm ra bao nhiêu bộ nhớ đang được sử dụng bởi một trang web hoặc bởi ứng dụng jquery của tôi?

Đây là tình huống của tôi:

Tôi đang xây dựng một ứng dụng web nặng về dữ liệu bằng cách sử dụng giao diện người dùng jquery và phần phụ trợ hoạt động hiệu quả cung cấp dữ liệu trong JSON. Trang được tải một lần và sau đó mọi thứ diễn ra thông qua ajax.

Giao diện người dùng cung cấp cho người dùng cách tạo nhiều tab trong giao diện người dùng và mỗi tab có thể chứa rất nhiều dữ liệu. Tôi đang xem xét giới hạn số lượng tab mà họ có thể tạo, nhưng tôi nghĩ sẽ rất tuyệt nếu chỉ giới hạn chúng khi mức sử dụng bộ nhớ đã vượt quá một ngưỡng nhất định.

Dựa trên các câu trả lời, tôi muốn đưa ra một số phân biệt:

• Tôi đang tìm giải pháp thời gian chạy (không chỉ là công cụ dành cho nhà phát triển) để ứng dụng của tôi có thể xác định các hành động dựa trên việc sử dụng bộ nhớ trong trình duyệt của người dùng.
• Việc đếm các phần tử DOM hoặc kích thước tài liệu có thể là một ước tính tốt, nhưng nó có thể không chính xác vì nó sẽ không bao gồm ràng buộc sự kiện, dữ liệu (), plugin và các cấu trúc dữ liệu trong bộ nhớ khác.

Cập nhật năm 2015

Quay lại năm 2012, điều này là không thể, nếu bạn muốn hỗ trợ tất cả các trình duyệt chính đang được sử dụng. Thật không may, hiện tại đây vẫn là một tính năng chỉ dành cho Chrome (một phần mở rộng không chuẩn của window.performance).

window.performance.memory

Hỗ trợ trình duyệt: Chrome 6+

2012 Câu trả lời

Có cách nào để tìm ra bao nhiêu bộ nhớ đang được sử dụng bởi một trang web hoặc bởi ứng dụng jquery của tôi? Tôi đang tìm giải pháp thời gian chạy (không chỉ là công cụ dành cho nhà phát triển) để ứng dụng của tôi có thể xác định các hành động dựa trên việc sử dụng bộ nhớ trong trình duyệt của người dùng.

Câu trả lời đơn giản nhưng chính xác là không . Không phải tất cả các trình duyệt đều tiết lộ dữ liệu đó cho bạn. Và tôi nghĩ bạn nên bỏ ý tưởng đơn giản vì sự phức tạp và không chính xác của một giải pháp "thủ công" có thể gây ra nhiều vấn đề hơn là nó giải quyết được.

Việc đếm các phần tử DOM hoặc kích thước tài liệu có thể là một ước tính tốt, nhưng nó có thể không chính xác vì nó sẽ không bao gồm ràng buộc sự kiện, dữ liệu (), plugin và các cấu trúc dữ liệu trong bộ nhớ khác.

Nếu bạn thực sự muốn gắn bó với ý tưởng của mình, bạn nên tách nội dung cố định và nội dung động.

Nội dung cố định không phụ thuộc vào hành động của người dùng (bộ nhớ được sử dụng bởi các tệp script, plugin, v.v.)
Mọi thứ khác được coi là động và phải là trọng tâm chính của bạn khi xác định giới hạn của mình.

Nhưng không có cách nào dễ dàng để tóm tắt chúng. Bạn có thể triển khai một hệ thống theo dõi thu thập tất cả những thông tin này. Tất cả các hoạt động nên gọi các phương pháp theo dõi thích hợp. ví dụ:

Gói hoặc ghi đè jQuery.dataphương pháp để thông báo cho hệ thống theo dõi về việc phân bổ dữ liệu của bạn.

Kết hợp các thao tác html để thêm hoặc bớt nội dung cũng được theo dõi ( innerHTML.lengthlà ước tính tốt nhất).

Nếu bạn giữ các đối tượng lớn trong bộ nhớ, chúng cũng cần được theo dõi.

Đối với ràng buộc sự kiện, bạn nên sử dụng ủy quyền sự kiện và sau đó nó cũng có thể được coi là một yếu tố cố định.

Một khía cạnh khác khiến khó ước tính chính xác yêu cầu bộ nhớ của bạn là các trình duyệt khác nhau có thể phân bổ bộ nhớ khác nhau (đối với các đối tượng Javascript và các phần tử DOM).

Bạn có thể sử dụng API thời gian điều hướng .

Thời gian điều hướng là một API JavaScript để đo lường chính xác hiệu suất trên web. API cung cấp một cách đơn giản để có được thống kê thời gian chính xác và chi tiết — nguyên bản — cho các sự kiện tải và điều hướng trang.

window.performance.memory cấp quyền truy cập vào dữ liệu sử dụng bộ nhớ JavaScript.

Đề xuất đọc

• Đo tốc độ tải trang với Định thời gian điều hướng

Câu hỏi này đã có từ 5 năm trước, và cả javascript và trình duyệt đều đã phát triển vượt bậc trong thời gian này. Vì điều này hiện có thể (trong ít nhất một số trình duyệt) và câu hỏi này là kết quả đầu tiên khi bạn Google "javascript hiển thị bộ nhớ sử dụng", tôi nghĩ tôi sẽ đưa ra một giải pháp hiện đại.

memory-stats.js: https://github.com/paulirish/memory-stats.js/tree/master

Tập lệnh này (bạn có thể chạy bất kỳ lúc nào trên bất kỳ trang nào) sẽ hiển thị dung lượng bộ nhớ hiện tại của trang:

var script=document.createElement('script');
script.src='https://rawgit.com/paulirish/memory-stats.js/master/bookmarklet.js';
document.head.appendChild(script);

Tôi không biết bằng cách nào mà bạn thực sự có thể tìm ra lượng bộ nhớ đang được trình duyệt sử dụng, nhưng bạn có thể sử dụng phương pháp phỏng đoán dựa trên số lượng phần tử trên trang. Uinsg jQuery, bạn có thể làm $('*').lengthvà nó sẽ cung cấp cho bạn số lượng phần tử DOM. Thành thật mà nói, có lẽ dễ dàng hơn nếu chỉ thực hiện một số kiểm tra khả năng sử dụng và đưa ra một số tab cố định để hỗ trợ.

Sử dụng công cụ Ảnh chụp nhanh hàng đống của Chrome

Ngoài ra còn có một công cụ Firebug được gọi là MemoryBug nhưng có vẻ như nó chưa hoàn thiện lắm.

Nếu bạn chỉ muốn xem để thử nghiệm, có một cách trong Chrome thông qua trang nhà phát triển để theo dõi việc sử dụng bộ nhớ, nhưng không chắc chắn cách thực hiện trực tiếp trong javascript.

Tôi muốn đề xuất một giải pháp hoàn toàn khác với các câu trả lời khác, đó là quan sát tốc độ ứng dụng của bạn và một khi nó giảm xuống dưới mức xác định hoặc hiển thị mẹo cho người dùng để đóng tab hoặc tắt mở tab mới. Một lớp đơn giản cung cấp loại thông tin này, chẳng hạn như https://github.com/mrdoob/stats.js . Bên cạnh đó, có thể không khôn ngoan nếu một ứng dụng chuyên sâu như vậy giữ tất cả các tab trong bộ nhớ ngay từ đầu. Ví dụ: chỉ giữ trạng thái người dùng (cuộn) và tải tất cả dữ liệu mỗi lần tất cả trừ hai tab cuối cùng đang mở có thể là một lựa chọn an toàn hơn.

Cuối cùng, các nhà phát triển webkit đã thảo luận về việc thêm thông tin bộ nhớ vào javascript, nhưng họ đã vướng vào một số tranh luận về những gì và những gì không nên được tiết lộ. Dù bằng cách nào, không chắc rằng loại thông tin này sẽ có sẵn trong một vài năm (mặc dù thông tin đó không quá hữu ích ngay bây giờ).

Đặt câu hỏi hoàn hảo cho tôi khi bắt đầu dự án tương tự!

Không có cách nào chính xác để giám sát việc sử dụng bộ nhớ JS trong ứng dụng vì nó sẽ yêu cầu các đặc quyền cấp cao hơn. Như đã đề cập trong phần nhận xét, việc kiểm tra số lượng của tất cả các phần tử, v.v. sẽ rất lãng phí thời gian vì nó bỏ qua các sự kiện ràng buộc, v.v.

Đây sẽ là một vấn đề về kiến ​​trúc nếu bảng kê khai rò rỉ bộ nhớ hoặc các phần tử không sử dụng vẫn còn. Đảm bảo rằng nội dung của các tab đã đóng sẽ bị xóa hoàn toàn mà không có trình xử lý sự kiện kéo dài, v.v. sẽ là hoàn hảo; giả sử rằng nó đã hoàn tất, bạn chỉ có thể mô phỏng việc sử dụng nhiều trong trình duyệt và ngoại suy kết quả từ việc theo dõi bộ nhớ (nhập about: memory vào thanh địa chỉ)

Chú giải: nếu bạn mở cùng một trang trong IE, FF, Safari ... và Chrome; và ngoài điều hướng đến about: memory trong Chrome, nó sẽ báo cáo việc sử dụng bộ nhớ trên tất cả các trình duyệt khác. Khéo léo!

Những gì bạn có thể muốn làm là yêu cầu máy chủ theo dõi băng thông của họ cho phiên đó (bao nhiêu byte dữ liệu đã được gửi đến họ). Khi chúng vượt quá giới hạn, thay vì gửi dữ liệu qua ajax, máy chủ sẽ gửi mã lỗi mà javascript sẽ sử dụng để cho người dùng biết rằng chúng đã sử dụng quá nhiều dữ liệu.

Bạn có thể lấy document.documentElement.innerHTML và kiểm tra độ dài của nó. Nó sẽ cung cấp cho bạn số byte được sử dụng bởi trang web của bạn.

Điều này có thể không hoạt động trong tất cả các trình duyệt. Vì vậy, bạn có thể bao gồm tất cả các phần tử cơ thể của bạn trong một div khổng lồ và gọi innerhtml trên div đó. Cái gì đó như<body><div id="giantDiv">...</div></body>