jQuery или javascript для определения использования памяти страницей

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

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

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

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

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

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

Обновление 2015 г.

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

window.performance.memory

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

2012 Ответ

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

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

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

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

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

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

jQuery.dataМетод переноса или перезаписи для информирования системы отслеживания о распределении ваших данных.

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

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

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

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

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

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

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

Рекомендуемая литература

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

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

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);

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

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

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

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

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

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

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

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

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

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

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

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

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