Утечки памяти в браузерах - распространенное явление, и особенно подвержен этому напастью Internet Explorer. Для обнаружения утечек памяти в IE существует замечательная утилита 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
Загрузив эту страницу в sIEve, нажмем на кнопку Auto-refresh. В результате мы увидим, что выделение памяти при каждом обновлении страницы увеличивается, что свидетельствует об утечке.
Обнаруженные утечки памяти
Теперь нажмем на кнопку Show Leaks, и в появившемся окне увидим все созданные объекты span, которые не были удалены из памяти. В этом же диалоге можно просмотреть свойства обнаруженных элементов, выделив их, и нажав на кнопку Properties.
Скачать sIEve и просмотреть документацию к нему можно здесь.