Как узнать, что вызывает мой Javascript для сбоя на вкладке браузера?

Question

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

Я попытался включить ведение журнала в Chrome, но сбои не выдают отчет об ошибке в файле chrome_debug.

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

Я пытался использовать Electron, чтобы превратить его в исполняемое приложение, но приложение по-прежнему зависало. Этого не должно случиться, если это проблема с памятью, верно?

Есть ли способ узнать, что вызывает сбой кода?

Answer 1

Большинство непредсказуемых сбоев в Javascript вызваны утечками памяти - объектами, которые все еще хранятся в памяти и не собираются сборщиком мусора. Каждый объект в Javascript хранится в переменной где-то в пределах глобальной области видимости или связан с другим объектом, который сам связан с глобальной областью видимости. Когда «ветвь» «дерева» удаляется и глобальный охват больше не доступен, сборщик мусора уничтожает ее.

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

Чтобы найти утечки памяти в Chrome, нажмите F12 и откройте вкладку «Производительность». Записывая страницу с течением времени, вы можете просмотреть объем используемой памяти. Зеленая линия (узлы) здесь самая важная - она ​​относится к количеству объектов в памяти. Если узлы постоянно увеличиваются с течением времени (всегда будут увеличиваться и уменьшаться, но если общий уровень постоянно растет), это обычно означает утечку памяти.

Чтобы определить, какие именно объекты вызывают проблему, откройте вкладку «Память», чтобы сделать снимки или профили временной шкалы кучи памяти. Это дает вам счет конкретных объектов, которые находятся в памяти в любой момент времени. Если какого-то объекта больше, чем должно быть, вот где утечка.