Где здесь утечка памяти?

Question

[Алексей Ярков]

Господа! Ай нид хэлп!
Сил моих не осталось уже.
Пишу расширение для браузера. В общем отключил все что можно и оставил только один таймер.

Почти реальный пример кода. Методы класса вынесены в функции и убрана jQuery выборка.

// utils.js
export const getPage = ( url, _method = 'GET', _headers = {} ) => {
    const headers = new Headers();

    for ( const key in _headers ) {
        if ( {}.hasOwnProperty.call( _headers, key ) ) {
            headers.append( key, _headers[ key ] );
        }
    }

    headers.append( 'Pragma', 'No-cache' );
    headers.append( 'Cache-Control', 'No-cache' );

    const config = {
        method: _method,
        headers: headers,
        credentials: 'include',
        cache: 'no-store',
        client: 'no-window'
    };
    const f = fetch( url, config )
        .then( ( response ) => {
            if ( response.status >= 200 && response.status < 300 ) {
                return Promise.resolve( response );
            }
            return Promise.reject( new Error( response.statusText ) );
        } )
        .then( response => response.text() )
        .catch( console.error );
    return f;
};

// background.js
import { getPage } from './utils';

let Timer = null;
let useNotificationsFlag = 0;
const tracker_url = 'https://toster.ru/my/feed';
const Options = {};

const checkNotify = () => {
    window.promise = getPage( tracker_url );
    window.promise.then( ( body ) => {
            // В body лежит html страницы Тостера
            // Работаем с помощью jQuery, делаем выборку и считаем количество элементов
            // Обновляем иконку расширения

            body = null;
            return Promise.resolve();
        } )
        .then( () => ( window.promise = null ) );
}

const stopTimer = () => {
    clearTimeout( Timer );
    window.promise = null;
}

const reStartTimer = () => {
    stopTimer();
    startTimer();
}

const startTimer = () => {
    if ( !Options.check_notify || ( Options.interval < 1 ) ) {
        return false;
    }

    Timer = setTimeout( () => checkNotify(), Options.interval * 1000 );
}

startTimer();

В общем если вызывать reStartTimer() каждые 5-10 секунд, то съедаемая память растет на 400-600 Кб с каждым запросом.
В итоге расширение отжирает гигантское количество памяти и падает (((
Я уже всю башку сломал...

Comments

[Alex XYZ]

Если вы делаете для хрома, то смотрели ли вы memory snapshots?

[Алексей Ярков]

Захаров Александр: делаю для FF, Chrome, Opera. Но не умею я пользоваться средствами отладки ( о позор на мои седины... ).

[Alex XYZ]

Мне это знакомство с отладчиком понравилось: https://www.youtube.com/watch?v=L3ugr9BJqIs
Вот хорошие картинки: https://developers.google.com/web/tools/chrome-dev...

[Алексей Ярков]

Захаров Александр: да я как бы не совсем уверен, что косяк мой. Вот скрин:

Колонка "Память" - меняется с каждым запросом.
Колонка "Память JavaScript" - стоит на месте.

Я хз что за фигня.

[Alex XYZ]

Алексей Ярков: смотрите devtools, диспетчер просто общий инструмент, чтобы определить направление как действовать. Да, он уже помог вам увидеть, что есть утечка памяти. Дальше нужно что-то более специальное.

[Risent Veber]

Попробуй убрать `.then( () => ( window.promise = null ) );`

[Risent Veber]

А точнее вообще убрать window.promise - оно тебе не нужно

[Алексей Ярков]

Risent Veber: не помогло

[SergeyNN]

Недавно заметил, что setTimeout и setInterval съедают много памяти. Может и у вас дело в этом.

[Алексей Ярков]

SergeyNN: ну это для примера. В расширении используется chrome.alarms.

Answer 1

[dummyman]

Во первых, вы неправильно используете анонимные функции, например
const startTimer = (){ ... }
и все остальные.
Анонимные функции можно использовать только в ситуациях, когда их вызывают "не по имени" для сохранения контекста. Например, аргументом forEach().
В данной ситуации лучшей синтаксической формы ничего не придумали:
function startTimer(){ ... }
Второй момент

for ( const key in _headers ) {
        if ( {}.hasOwnProperty.call( _headers, key ) ) {
            headers.append( key, _headers[ key ] );
        }
    }

и конкретно
if ( {}.hasOwnProperty.call( _headers, key ) )
Вы в цикле каждой итерацией создаете новый объект, это крайне не рациональное использование метода hasOwnProperty()
по мне
if (_headers != null && !!_headers[key] )
может выглядело бы не так красиво, за то потребляет памяти по-меньше.
Третий момент
.catch( console.error )
Вы можете немного сэкономить памяти использовав как раз по назначению анонимную функцию
.catch( e => console.error(e) )
В этом случае интерпритатор не будет искать ссылку на console.error при создании каждого промиса, и будет искать, соответственно, только в исключитальных ситуациях.
Четвертый момент
Поменьше пользуйтесь ключевым словом const, особенно, внутри методов и функций. Во-первых, так как они не выгружаются из памяти. Во вторых, const не дает никаких преимуществ в производительности, только лишь накладывает на интерпритатор обязанности следить чтобы ее случайно не перегрузили.

Comments

[Алексей Ярков]

Ваши замечания я учел. Спасибо. Но ничего не изменилось.

[dummyman]

Алексей Ярков: Я дописал четвертый момент

[Алексей Ярков]

dummyman:

Поменьше пользуйтесь ключевым словом const, особенно, внутри методов и функций. Во-первых, так как они не выгружаются из памяти

Охренеть... Тогда пойду eslint перенастрою и на let заменю.

[dummyman]

Алексей Ярков: Ну а вообще надо смотреть, если это не помогло, значит где-то в другом месте проблема. Конкретно, как вычислить место утечки не знаю, но сам для себя уже давно выработал привычки работы на яваскрипте как в си. Важно, например, понимать

var A = { b: 'c' };
var a=new A;
a['d']='e';
// или
a.d='e';

сожрут много производительности и памяти, т.к. a - уже экземпляр своего собственного класса, а не экземпляр класса A. То есть прототип объектов должен задаваться только при создании объкта. Ну это один из неявных моментов, где многие делают ошибки, но про это мало где пишут.

[dummyman]

Блин, под вечер тупанул.
конечно, имел в виду
var A = function(){ this.b='c' }

[dummyman]

Алексей Ярков: Еще раз хочется отметить про то, что написал "во-первых", про анонимные функции - это абсолютно самое главное что следовало бы исправить по вашему коду.

[Алексей Ярков]

dummyman: спасибо. Буду проовать.

[Алексей Ярков]

Забыл сказать. У меня же это все еще babel и browserify собирают в кучу.

[dummyman]

Алексей Ярков: АА ну там с оговорками, если, конечно, до поддержки IE7+ все заменяет, то может, в этом нет разницы. В любом случае, у него десятки модулей, разобраться что именно утекает в вашем случае проще на кофейной гуще. Имеет смысл сразу выложить код после трансляции, по нему бы стало виднее.

[dummyman]

Алексей Ярков: Даже не десятки

1519 packages found for "babel-plugin"

[dummyman]

Хотя погодь, повнимательнее почитал вопрос.

window.promise.then( ( body ) => {
            // В body лежит html страницы Тостера
            // Работаем с помощью jQuery, делаем выборку и считаем количество элементов
            // Обновляем иконку расширения

            body = null;
            return Promise.resolve();
        } )
        .then( () => ( window.promise = null ) );

а что конкретно ты делаешь с body где коментарий? Чем ты его парсишь чтобы использовать jQuery?

Answer 2

[akzhan]

Проверьте на всякий случай, что у вас в любом случае вызывается response.text() или аналоги. Если не вызовется, возможен memory leak как минимум в V8.

А вообще в Chrome же можно делать снимки кучи.

Comments

[Kir ---]

Эти снимки кучи ничерта не помогают.
Самое интересное, что при снимках кучи он оставляет ссылки на инстансы объектов в предыдуших снимках. И даже не текущее приложение будет течь в профайлере :)

Нормальный профайлер только в Microsoft Edge

[Алексей Ярков]

Kir ---:

Эти снимки кучи ничерта не помогают

Если бы еще уметь этим всем пользоваться ))) Вот я и страдаю.

- - - - - - - - - - - - - - - - - - - - - - - - -
Расширение для сайта toster.ru:

Toster Tools

https://github.com/yarkovaleksei/toster-tools