Опубликовано в Google Webperf (London Webperf Group), 26 августа 2014 года.
Эффективные веб -приложения JavaScript должны быть гладкими и быстрыми. Любое приложение, которое взаимодействует с пользователями, должно рассмотреть вопрос о том, как обеспечить эффективное использование памяти, потому что, если потребляется слишком много, страница будет сбояться, заставив пользователя перезагрузить. И вы можете спрятаться только в углу и плакать.
Автоматическая сборка мусора не является заменой эффективного управления памятью, особенно в больших, долгосрочных веб-приложениях. В этой лекции мы продемонстрируем, как эффективно управлять памятью через Devtools Chrome.
И узнайте, как решить проблемы с производительностью, такие как утечки памяти, частая пауза сбора мусора и общее раздувание памяти, что действительно стоит вам энергии.
Адди Османи показывает множество примеров в своем PPT, что вызовет утечки памяти в Chrome V8:
1) Удалить свойство объекта, чтобы замедлить этот объект (потребление в 15 раз больше памяти)
Кода -копия выглядит следующим образом:
var O = {x: 'y'};
Удалить OX; // В это время o станет медленным объектом
бык; //
var O = {x: 'y'};
o = null; // это должно быть так
2) Закрытие
При введении переменных вне закрытия в закрытие, этот объект не может быть собранным мусором (GC), когда закрытие заканчивается.
Кода -копия выглядит следующим образом:
var a = function () {
var shargestr = новый массив (1000000) .join ('x');
return function () {
вернуть наибольшее время;
}
} ();
3) DOM утечка
Когда оригинальный COM удаляется, ссылка на суб-узел не может быть переработана, если он не будет удален.
Кода -копия выглядит следующим образом:
var select = document.queryselector;
var treeref = select ('#tree');
// В Com Tree, Leafref - это детский узел Treefre
var Leafref = select ('#Leaf');
var body = select ('body');
Body.removechild (Treeref);
//#Дерево не может быть погашено, потому что Treeref все еще там
//Решение:
treeref = null;
// дерево еще не может быть переработано, потому что листья результата листья все еще там
Leafref = null;
// Сейчас #Tree может быть выпущен.
4) Таймеры подсчета (определение) утечка таймера
Таймеры также являются обычными местами, где возникают утечки памяти:
Кода -копия выглядит следующим образом:
для (var i = 0; i <90000; i ++) {
var buggyobject = {
Callagain: function () {
var ref = this;
var val = settimeout (function () {
ref.callagain ();
}, 90000);
}
}
buggyobject.callagain ();
// хотя вы хотите переработать, таймер все еще там
BuggyObject = null;
}
5) Память отладки
Инструмент отладки памяти Chrome может легко просматривать использование памяти и утечки памяти:
Нажмите «Запись» в временной шкале -> Память:
Для получения дополнительного контента, пожалуйста, проверьте исходный PPT.