jQuery або javascript, щоб знайти використання пам’яті сторінки

Чи є спосіб дізнатись, скільки пам'яті використовується веб-сторінкою або моєю програмою jquery?

Ось моя ситуація:

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

Інтерфейс користувача надає користувачам можливість створювати кілька вкладок в інтерфейсі, і кожна вкладка може містити багато-багато даних. Я розглядаю можливість обмежити кількість вкладок, які вони можуть створити, але думав, що було б непогано обмежити їх лише після того, як використання пам'яті перевищить певний поріг.

Спираючись на відповіді, я хотів би пояснити:

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

Оновлення за 2015 рік

Ще в 2012 році це було неможливо, якщо ви хотіли підтримати всі основні браузери, що використовуються. На жаль, зараз це все ще лише функція Chrome (нестандартне розширення window.performance).

window.performance.memory

Підтримка браузера: Chrome 6+

Відповідь 2012 року

Чи є спосіб дізнатись, скільки пам'яті використовується веб-сторінкою або моєю програмою jquery? Я шукаю рішення для виконання (не лише інструменти розробника), щоб мій додаток міг визначати дії на основі використання пам'яті в браузері користувача.

Проста, але правильна відповідь - ні . Не всі браузери надають вам такі дані. І я думаю, що вам слід відмовитись від цієї ідеї просто тому, що складність та неточність рішення, створеного вручну, може створити більше проблем, ніж вирішує.

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

Якщо ви дійсно хочете дотримуватися своєї ідеї, вам слід розділити фіксований та динамічний вміст.

Виправлений вміст не залежить від дій користувача (пам’ять, яку використовують файли сценаріїв, плагіни тощо).
Все інше вважається динамічним і має бути вашим основним акцентом при визначенні ліміту.

Але немає простого способу їх узагальнити. Ви можете застосувати систему відстеження, яка збирає всю цю інформацію. Усі операції повинні викликати відповідні методи відстеження. наприклад:

jQuery.dataМетод обтікання або перезапису, щоб повідомити систему відстеження про ваші розподіли даних.

Оберніть маніпуляції з HTML так, щоб додавання або видалення вмісту також відстежувалось ( innerHTML.lengthце найкраща оцінка).

Якщо ви зберігаєте великі об'єкти в пам'яті, за ними слід також стежити.

Що стосується прив'язки подій, ви повинні використовувати делегування подій, і тоді це також можна вважати дещо фіксованим фактором.

Ще одним аспектом, який ускладнює правильну оцінку потреб у вашій пам’яті, є те, що різні браузери можуть розподіляти пам’ять по-різному (для об’єктів Javascript та елементів DOM).

Ви можете використовувати API навігації часу .

Navigation Timing - це API JavaScript для точного вимірювання продуктивності в Інтернеті. API надає простий спосіб отримати точну та детальну статистику синхронізації - спочатку - для навігації сторінками та подій завантаження.

window.performance.memory надає доступ до даних про використання пам'яті JavaScript.

Рекомендоване читання

• Вимірювання швидкості завантаження сторінки за допомогою навігаційного часу

Цьому питанню 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);

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

Скористайтеся інструментом " Хромовий знімок купи"

Існує також інструмент 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>