Как проверить утечку памяти в Javascript

внешний интерфейс JavaScript Chrome

js утечки памяти обычно вызваны замыканиями.Когда мы оцениваем, есть ли утечка памяти, мы часто чувствуем, что понятия не имеем, что делать. Обычно мы используем codereview, чтобы судить о том, есть ли утечка, но этот метод недостаточно объективен. Нам нужен объективный способ доказать наличие утечки.

Chrome Devtool

На самом деле Devtool уже предоставляет инструмент для проверки, т.е.Memoryпанель. Похоже на это.

Мы можем использовать этот инструмент, чтобы сделать снимок состояния памяти страницы в определенный момент, который включает в себя все узлы Dom и js-объекты на странице в этот момент. Мы можем искать возможные утечки js-объектов, чтобы подтвердить наличие утечек памяти.

Пример

В этом примере явно есть утечка памяти,l1К этому объекту обращаются обработчики событий, поэтому его нельзя освободить. Давайте сделаем это в действии.

function leak(arg) {
    this.arg = arg;
}

function test() {
    var l1= new leak('It is a leak');

    document.body.addEventListener('click', function() {
        l1.arg = 'Here you are!'
    })
}

test();

Шаг 1 Запишите снимок

выберитеHeap snapshot, затем нажмите маленькую точку в левом верхнем углу. Полученный снимок можно увидеть через несколько секунд.

Шаг 2 Поиск потенциальных объектов утечки

Введите выше тип объекта, который может просочиться, а затем просмотрите экземпляр измененного типа в памяти.

Как показано на рисунке выше, мы нашли экземпляр объекта. Через некоторое сравнение данных мы можем доказать наличие утечки.

Шаг 3 Устраните эту утечку

Мы можем удалить привязку события после запуска события, чтобы устранить эту утечку.

function leak(arg) {
    this.arg = arg;
}

function test() {
    var l1= new leak('It is a leak');

    function l() {
        console.info('Here you are!')
        l1.arg = 'Here you are!'
        document.body.removeEventListener('click', l);
    }

    document.body.addEventListener('click', l)
}

test();

На данный момент объект экземпляра утечки больше не существует.

Категории