Understand memory leaks in JavaScript applications / Понимание утечек памяти в приложениях на JavaScript: Анализ снимка памяти

Оглавление

Сбросить всё

Английский оригинал	Перевод на русский
Сожалеем, но текст оригинала доступен только зарегистрированным пользователям.	Перед тем, как создать утечку, посмотрим на простой пример, в котором с памятью все в порядке. Начнем с создания простой HTML-страницы с двумя кнопками (см. листинг 1). Stutzer 24.01.13 в 01:10 0
	Листинг 1. index.html Stutzer 24.01.13 в 01:10 0
	jQuery был подключен для обеспечения простого кросс-браузерного синтаксиса управления событиями и closely parallels the most common development practices. Тэги script добавлены для класса leaker и для основного JavaScript-метода. В продакшене, как правило, принято объединять все JavaScript файлы в один, но для целей этого примера разумнее распределить логические элементы по разным файлам. Stutzer 24.01.13 в 01:18 0
	Heap Profilre может отфильтровать экземпляры определенного класса. Для демонстрации этой возможности создадим новый класс, инкапсулирующий поведение утекающего объекта, который мы сможем обнаружить в профайлере (см. листинг 2). Stutzer 24.01.13 в 01:32 0
	Листинг 2. assets/scripts/leaker.js Stutzer 24.01.13 в 01:33 0
	Повесим на нажатие кнопки Start инициализацию обхекта Leaker и присвоим его глобальной переменной. Вам также нужно будет повесить на нажатие кнопки Destroy запуск метода, который должен удалить объект Leaker, чтобы сборщик мусора мог разделаться с ним (см. листинг 3). Stutzer 24.01.13 в 01:37 0
	Листинг 3. assets/scripts/main.js Stutzer 24.01.13 в 01:37 0
	На этом этапе все готово для того, чтобы создать объект, увидеть его в профайлере и, затем, уничтожить его, освободив выделенную область памяти. Stutzer 24.01.13 в 01:39 0
	1. Откройте страницу index.html в браузере Chrome. Поскольку в нашем примере jQuery загружается с сервера Google, необходимо подключение к Интернету. Stutzer 24.01.13 в 01:41 0
	2. Откройте панель Developer Tools (Нажмите F12 или испоьзуйте меню Просмотр, Разработчикам, Инструменты разработчика). Stutzer 24.01.13 в 01:42 0
	3. Перейдите во вкладку Profiles, выберите пункт "Take Heap Snapshot" и нажмите "Start". Stutzer 24.01.13 в 01:48 0
	Рисунок 2. Вкладка "Profiles" Stutzer 24.01.13 в 01:48 0
	4. Верните фокус на страницу и нажмите кнопку "Start" Stutzer 24.01.13 в 01:49 0
	5. Сделайте еще один снимок. Stutzer 24.01.13 в 01:49 0
	6. Отфильтруйте первый снимок, чтобы увидеть экземплары класса Leaker. Результат должен быть пустым. Переключитесь на второй снимок и вы должны будете обнаружить один экземпляр класса (см. Рисунок 3). Stutzer 24.01.13 в 01:50 0
	Рисунок 3. Экземпляры класса Stutzer 24.01.13 в 01:51 0
	7. Верните фокус в окно и нажмите кнопку "Destroy". Stutzer 24.01.13 в 01:51 0
	8. Сделайте третий снимок. Stutzer 24.01.13 в 01:52 0
	9. Отфильтруйте третий снимок, чтобы видеть экземпляры класса Leaker. Результат должен быть сноав пуст. Также, выбрав третий снимок, вы можете переключиться с режима Summary (Сводка) на режим Comparison (Сравнение) и сравнить третий и второй снимки. Вы должны увидеть разницу в -1 (один объект типа Leaker был уничтожен между этими снимками). Stutzer 24.01.13 в 01:58 0
	Ура! Сборщик мусора работает исправно. Настало время сломать его. Stutzer 24.01.13 в 01:58 0