JQuery или JavaScript, чтобы найти использование памяти страницы

Question

Есть ли способ узнать, сколько памяти используется веб-страницей или моим приложением jquery?

Вот моя ситуация:

Я создаю веб-приложение с большими объемами данных, используя внешний интерфейс jquery и спокойный внутренний интерфейс, который обслуживает данные в JSON. Страница загружается один раз, а затем все происходит через ajax.

Пользовательский интерфейс предоставляет пользователям возможность создавать несколько вкладок в пользовательском интерфейсе, и каждая вкладка может содержать много и много данных. Я рассматриваю возможность ограничения количества вкладок, которые они могут создавать, но подумал, что было бы неплохо ограничить их только после того, как использование памяти превысит определенный порог.

Исходя из ответов, я хотел бы сделать некоторые пояснения:

• Я ищу решение времени выполнения (а не только инструменты разработчика), чтобы мое приложение могло определять действия на основе использования памяти в браузере пользователя.
• Подсчет элементов DOM или размера документа может быть хорошей оценкой, но он может быть довольно неточным, поскольку он не будет включать привязку событий, data (), плагины и другие структуры данных в памяти.

Answer 1

Обновление 2015 года

В 2012 году это было невозможно, если вы хотели поддерживать все основные используемые браузеры. К сожалению, сейчас это все еще функция Chrome (нестандартное расширение window.performance).

window.performance.memory

Поддержка браузера: Chrome 6 +

---

2012 Ответ

Есть ли способ узнать, сколько памяти используется веб-страницей или моим приложением jquery? Я ищу решение времени выполнения (а не только инструменты разработчика), чтобы мое приложение могло определять действия на основе использования памяти в браузере пользователя.

Простой, но правильный ответ: нет . Не все браузеры предоставляют вам такие данные. И я думаю, что вы должны отказаться от этой идеи просто потому, что сложность и неточность решения "handmade" могут создать больше проблем, чем решить.

Подсчет элементов DOM или размера документа может быть хорошей оценкой, но он может быть весьма неточным, поскольку он не будет включать привязку событий, data (), плагины и другие структуры данных в памяти.

Если вы действительно хотите придерживаться своей идеи, вам следует разделить фиксированный и динамический контент.

Фиксированное содержимое не зависит от действий пользователя (память, используемая файлами сценариев, плагинами и т. Д.)
Все остальное считается динамичным и должно быть вашим основным фокусом при определении вашего лимита.

Но нет простого способа суммировать их. Вы могли бы внедрить систему tracking , которая собирает всю эту информацию. Все операции должны вызывать соответствующие методы отслеживания. например:

Обертывание или перезапись jQuery.data метод информирования системы tracking о ваших распределениях данных.

Оберните html-манипуляции так, чтобы добавление или удаление контента также отслеживалось (innerHTML.length - лучшая оценка).

Если вы храните большие объекты в памяти, их также следует отслеживать.

Что касается привязки событий, вы должны использовать делегирование событий , и тогда это также можно считать несколько фиксированным фактором.

Еще один аспект, который затрудняет правильную оценку ваших требований к памяти, заключается в том, что разные браузеры могут распределять память по-разному (для объектов Javascript и элементов DOM).

Answer 2

Вы можете использовать API синхронизации времени .

Navigation Timing - это JavaScript API для точного измерения производительности в сети. API предоставляет простой способ получения точных и подробных статистических данных о времени - для навигации по страницам и загрузки событий.

window.performance.memory предоставляет доступ к данным об использовании памяти JavaScript.

Рекомендуемое чтение

• Измерение скорости загрузки страницы с помощью функции навигации

Answer 3

Этому вопросу 5 лет, и javascript, и браузеры за это время невероятно эволюционировали. Поскольку это теперь возможно (по крайней мере, в некоторых браузерах), и этот вопрос является первым результатом, когда вы Google «показывает использование памяти в javascript», я подумал, что предложу современное решение.

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

Этот скрипт (который вы можете запустить в любое время на любой странице) отобразит текущее использование памяти страницы:

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

Answer 4

Я не знаю, каким образом вы могли бы узнать, сколько памяти используется браузером, но вы можете использовать эвристику, основанную на количестве элементов на странице. Uinsg jQuery, вы можете сделать $('*').length, и он подсчитает количество элементов DOM. Честно говоря, тем не менее, вероятно, проще провести некоторое тестирование юзабилити и предложить фиксированное количество вкладок для поддержки.

Answer 5

Используйте инструмент Chrome Heap Snapshot

Существует также инструмент Firebug, называемый MemoryBug , но, похоже, он еще не очень развит.

Answer 6

Я хотел бы предложить совершенно иное решение, нежели другие ответы, а именно наблюдать за скоростью вашего приложения и, когда оно упадет ниже определенного уровня, либо показать пользователю подсказки, как закрыть вкладки, либо отключить открытие новых вкладок. Простой класс, который предоставляет такую ​​информацию, например, https://github.com/mrdoob/stats.js. Кроме того, для такого интенсивного приложения, возможно, было бы неразумно в первую очередь сохранять все вкладки в памяти. Например. более безопасным вариантом может быть сохранение только пользовательского состояния (прокрутка) и загрузка всех данных каждый раз, когда открываются все, кроме двух последних вкладок.

Наконец, разработчики webkit обсуждали добавление информации о памяти в javascript, но они получили ряд аргументов о том, что и что не следует раскрывать. В любом случае, не исключено, что такая информация будет доступна через несколько лет (хотя эта информация сейчас не слишком полезна).

Answer 7

Если вы хотите просто посмотреть на тестирование, в Chrome через страницу разработчика есть способ отслеживать использование памяти, но не знаете, как это сделать напрямую в javascript.

Answer 8

Идеальное время для вопроса со мной, начиная с аналогичного проекта!

Нет точного способа мониторинга использования памяти JS в приложении, поскольку для этого потребуются привилегии более высокого уровня. Как упоминалось в комментариях, проверка количества всех элементов и т. Д. Будет пустой тратой времени, поскольку она игнорирует связанные события и т. Д.

Это будет проблема архитектуры, если утечки памяти проявятся или неиспользуемые элементы сохранятся. Убедитесь, что содержимое закрытых вкладок полностью удалено без использования обработчиков событий и т. Д .; предполагая, что это сделано, вы можете просто смоделировать интенсивное использование в браузере и экстраполировать результаты мониторинга памяти (введите about: memory в адресной строке)

Подсказка: если вы открываете одну и ту же страницу в IE, FF, Safari ... и Chrome; и затем перейдите к about: memory в Chrome, он сообщит об использовании памяти в всех других браузерах. Ухоженная!

Answer 9

Вы можете получить document.documentElement.innerHTML и проверить его длину. Это даст вам количество байтов, используемых вашей веб-страницей.

Это может работать не во всех браузерах. Таким образом, вы можете заключить все элементы вашего тела в гигантский div и вызвать innerhtml для этого div. Что-то вроде <body><div id="giantDiv">...</div></body>

Answer 10

То, что вы можете сделать, - это проследить, чтобы сервер отслеживал их пропускную способность для этого сеанса (сколько байтов данных было отправлено им). Когда они превышают лимит, вместо отправки данных через ajax, сервер должен отправить код ошибки, который javascript будет использовать, чтобы сообщить пользователю, что он использовал слишком много данных.