JSToolbox - все о JavaScript » Утечки памяти http://www.jstoolbox.com Блог о программировании вообще и о JavaScript в частности, уроки, статьи, заметки, база знаний. Wed, 28 Jul 2010 22:33:40 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 Обнаружение утечек памяти в Internet Explorer http://www.jstoolbox.com/2008/02/12/obnaruzhenie-utechek-pamyati-v-internet-explorer/ http://www.jstoolbox.com/2008/02/12/obnaruzhenie-utechek-pamyati-v-internet-explorer/#comments Tue, 12 Feb 2008 21:35:59 +0000 admin http://www.jstoolbox.com/2008/02/12/obnaruzhenie-utechek-pamyati-v-internet-explorer/ Утечки памяти в браузерах – распространенное явление, и особенно подвержен этому напастью Internet Explorer. Для обнаружения утечек памяти в IE существует замечательная утилита sIEve, которая способна загружать страницу, производить мониторинг за выделение памяти, отображать свойства тэгов и др. Главное окно приложения показано на рисунке:

Главное окно sIEve
Главное окно sIEve

Для начала работы с приложением нужно ввести адрес тестируемой страницы в строку Address и нажать кнопку Go. После загрузки страницы, вы увидите в панели Memory usage изменения в выделении памяти. Если выделение памяти изменяется в большую сторону, то соответствующая строка выделяется красным цветом, в меньшую – зеленым. Самый простой тест – это последовательная перезагрузка страницы с контролем за выделением памяти. Чтобы начать тест, нужно нажать кнопку Auto-refresh – автообновление. sIEve начнет автоматически перезагружать страницу через короткие промежутки времени, при этом в панели Memory usage будет отображаться выделенная процессу память. Если выделение памяти постоянно расти, значит мы имеем дело с утечкой памяти. При нормальной же работе скрипта будет наблюдаться только небольшие флуктуации вокруг определенного уровня.

Обнаруженные утилитой утечки памяти можно просмотреть, нажав на кнопку Show Leaks. Кнопка Show in use в свою очередь служит для просмотра элементов, которые используются в данный момент.

Для демонстрации работы sIEve, рассмотрим небольшой пример:

<html>
<head>
<script type="text/javascript">

function foo(){}

function createNodes(){
	for (var i=0; i<100; i++){
		var elem = document.createElement("span");
		elem.onclick = function(){ foo(); }
	}
}

window.onload = createNodes;
</script>
</head>
<body>
	<div id="container">
		<h2>Sample page</h2>
		<form>
			<input type="text" name="" value="" />
			<input type="submit" name="" value="Submit" />
		</form>
	</div>
</body>
</html>

В этом примере функция createNodes создаёт 100 элементов “span”, которые не подключаются к DOM. Все эти созданные элементы не удаляются из памяти из-за наличия в анонимной функции, назначенной событию onclick, вызова функции foo(). Эта ссылка будет препятствовать удалению созданных элементов “span” из памяти, что ведет к её утечке.

Увеличение памяти при запуске auto-refresh
Увеличение памяти при
запуске auto-refresh

Загрузив эту страницу в sIEve, нажмем на кнопку Auto-refresh. В результате мы увидим, что выделение памяти при каждом обновлении страницы увеличивается, что свидетельствует об утечке.

Обнаруженные утечки памяти
Обнаруженные утечки памяти

Теперь нажмем на кнопку Show Leaks, и в появившемся окне увидим все созданные объекты span, которые не были удалены из памяти. В этом же диалоге можно просмотреть свойства обнаруженных элементов, выделив их, и нажав на кнопку Properties.

Скачать sIEve и просмотреть документацию к нему можно здесь.

]]> http://www.jstoolbox.com/2008/02/12/obnaruzhenie-utechek-pamyati-v-internet-explorer/feed/ 4