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

Ответ 1

2015 Update

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

window.performance.memory

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

Ответ 2012

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

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

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

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

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

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

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

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

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

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

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

Ответ 2

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

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

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

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

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

Ответ 3

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

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

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

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

Ответ 4

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

Ответ 5

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

Также есть инструмент Firebug, называемый MemoryBug, но кажется, что он еще не очень зрелый.

Ответ 6

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

Ответ 7

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

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

Ответ 8

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

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

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

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

Ответ 9

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

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

Ответ 10

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