Ajax тяжелые приложения JS, использующие чрезмерное количество памяти с течением времени

Question

Кажется, у меня довольно большие утечки памяти в приложении, над которым я работаю. Само приложение не очень сложное. Каждые 15 секунд страница запрашивает около 40 КБ JSON с сервера и рисует таблицу на странице, используя ее. Это дешевле, потому что данные, как правило, всегда новые. Я прилагаю несколько событий к таблице, около 5 на строку, 30 строк в таблице. Я использовал метод jhuery .html (), чтобы поместить новый html в контейнер и перезаписать существующий. Я делаю это специально для того, чтобы специальные функции очистки jQuery входили и пытались отсоединить все события в элементе, который он перезаписывает. Затем я также удаляю большие переменные html после их отправки в DOM, используя delete my_var.

Я проверил циклические ссылки и прикрепленные события, которые никогда не очищаются несколько раз, но в них ДЕЙСТВИТЕЛЬНО не копаются. Мне было интересно, может ли кто-нибудь дать мне несколько советов о том, как оптимизировать очень тяжелое приложение, подобное этому. Я только что подобрал «High Performance Javascript» Николаса Закаса, но у меня не было много времени, чтобы разобраться в этом.

Чтобы дать представление о том, сколько памяти он использует, через 4 часа он использует около 420 000 Кбайт в Chrome и намного больше в Firefox или IE.

Спасибо!

Answer 1

1) Оболочка Jquery Ajax, вызываемая периодически, приводит к утечкам памяти, и сообщество знает об этом (хотя проблема с оберткой ajax не так страшна, как в вашем случае).

2) Когда дело доходит до оптимизации, вы сделали первый шаг (с использованием облегченных вызовов json) и удалили метод, но проблема заключается в области «присоединения к событию» и методе html.

Что я имею в виду, это: 1) вы, вероятно, присоединяете слушателя после каждого вызова html () 2) вы заново рисуете таблицу отверстий при каждом вызове ajax. Это действительно приводит к утечкам памяти.

Вы должны: 1) нарисуйте таблицу (с первым контентом времени) на стороне сервера 2) $ (document). Уже вы прикрепляете слушателей к ячейкам таблицы 3) вызвать сервис json с помощью ajax, разобрать ответ 4) пополнить таблицу данными разобранного массива

Расскажите нам, чего вы достигли за это время:)

Answer 2

Я бы предложил написать тестовую версию вашего сценария без событий. Циркулярные ссылки DOM / JS могут быть очень трудно обнаружить. Исключив некоторые переменные из уравнения, вы можете немного сузить область поиска.

Answer 3

Почему бы не нарисовать таблицу и прикрепить события только один раз, а просто заменять данные таблицы каждые 15 секунд?

Answer 4

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

Также попробуйте и инкапсулируйте больше вашего JS, используя конструкторы и экземпляры объектов и т. Д.Когда JS представляет собой просто список функций и все переменные имеют глобальную область видимости, а не являются свойствами экземпляра, ваш JS может занимать много памяти.

Answer 5

Вы сохраняете что-нибудь в объект / массив?У меня было это раньше с плагином Chrome, где массив становился все больше и большеПохоже, это может быть вашей проблемой, особенно учитывая, что вы получаете 40 КБ

Answer 6

Я испытал то же самое. У меня был фрагмент кода, который опрашивал каждые 10 секунд и извлекал число ошибок текущего пользователя (ввод / аудит данных), простое целое число. Затем он использовался для замены текста внутри элемента div (чтобы пользователь знал, когда в его работе обнаруживаются новые ошибки). Если оставить его на ночь, браузер будет использовать более 1 ГБ памяти!

Самым близким, к которому я пришел к решению проблемы, было сокращение числа опросов каждые 2 минуты и настаивание на том, чтобы пользователь закрылся в конце дня. Лучшим решением по-прежнему было бы использование Ajax Push Engine для передачи данных на страницу ТОЛЬКО при возникновении ошибки. Это привело бы к тому, что данные отправлялись реже и, следовательно, использовалось меньше памяти.

Answer 7

У меня была похожая проблема только на этой неделе. Оказалось, у меня была круговая ссылка в моей базе данных. У меня был инвентарный предмет ABC123, помеченный как заменяемый XYZ321, а также XYZ321 помеченный как замененный ABC123. Иногда циклическая ссылка отсутствует в коде PHP.