Возникают ситуации, когда нам требуется довольно часто дергать какой-либо 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 можно эффективно кэшировать данные, выигрывая в производительности. Но будьте аккуратны, ведь выигрывая в производительности можно потерять на ресурсах и по неосторожности добиться утечки памяти.