JavaScript-кэширование

Игорь Грегорченко

04.12.2020 03:00

Возникают ситуации, когда нам требуется довольно часто дергать какой-либо DOM элемент (например, с помощью querySelector). Но к сожалению, этот метод довольно прожорливый и из-за него очень сильно падает производительность. Или, например, нужно часто делать тяжелые запросы на сервер в рамках одной сессии. Либо же пользоваться функциями, которые долго что-то считают.

К счастью, мы можем воспользоваться возможностями JavaScript’a и написать функцию cache, способную кэшировать результаты работы других методов, чтобы, в случае надобности, повторно не вызывать эти самые методы:

function cache(key, value) 
{
    if (typeof value == 'undefined') {
        return cache[key];
    }
    cache[key] = value;
}

Теперь на примерах рассмотрим как будет вести себя написанная выше функция cache.

Пример 1. Кэширование querySelector

// _io_q - обертка под querySelector, сохраняющая данные в кэш
_io_q = function(selector)
{
    if (!cache(selector)) { 
        cache(selector, document.querySelector(selector));
    }
    return cache(selector);
}

Теперь посмотрим на скорость работы _io_q и querySelector:

console.time('regular querySelector');
for (var i = 0; i < 1000000; i++) {
    document.querySelector('h1');
}
console.timeEnd('regular querySelector'); // regular querySelector: 100.6123046875ms


console.time('cached _io_q');
for (var i = 0; i < 1000000; i++) {
    _io_q('h1');
}
console.timeEnd('cached _io_q'); // cached _io_q: 5.77392578125ms

Пример 2. Кэширование запросов с сервера

Напишем функцию, которая отправляет очень тяжелый запрос на сервер:

function longRequestToServer(params)
{
    var key = params.endpoint + '_' + params.value;
    if (!cache(key)) {
        var result = 0;
        for (var i = 0; i < 999999999; i++) {
            result++;
        }
        cache(key, result);
    }
    return cache(key);
}

Посмотрим как будет вести себя функция:

console.time('first run');
longRequestToServer({
    endpoint : '/loadExample', 
    value : 10}
);
console.timeEnd('first run'); // first run: 1012.068115234375ms

console.time('second run');
longRequestToServer({
    endpoint : '/loadExample', 
    value : 10}
);
console.timeEnd('second run'); // second run: 1.31884765625ms

console.time('other request');
longRequestToServer({
    endpoint : '/loadSomeOtherData', 
    value : 15
});
console.timeEnd('other request'); // other request: 1033.783203125ms

TL;DR

Используя возможности JavaScript’a можно эффективно кэшировать данные, выигрывая в производительности. Но будьте аккуратны, ведь выигрывая в производительности можно потерять на ресурсах и по неосторожности добиться утечки памяти.

Этот текст был написан несколько лет назад. С тех пор упомянутые здесь инструменты и софт могли получить обновления. Пожалуйста, проверяйте их актуальность.