Obrasci memoizacije u JavaScriptu: Strategije predmemoriranja i poboljšanje performansi

U svijetu razvoja softvera, performanse su od presudne važnosti. JavaScript, kao svestran jezik koji se koristi u različitim okruženjima, od front-end web razvoja do poslužiteljskih aplikacija s Node.js-om, često zahtijeva optimizaciju kako bi se osiguralo glatko i učinkovito izvršavanje. Jedna moćna tehnika koja može značajno poboljšati performanse u određenim scenarijima je memoizacija.

Memoizacija je tehnika optimizacije koja se prvenstveno koristi za ubrzavanje računalnih programa pohranjivanjem rezultata skupih poziva funkcija i vraćanjem predmemoriranog rezultata kada se isti ulazni podaci ponovno pojave. U suštini, to je oblik predmemoriranja (caching) koji cilja specifično na funkcije. Ovaj pristup je posebno učinkovit za funkcije koje su:

• Čiste (Pure): Funkcije čija je povratna vrijednost određena isključivo njihovim ulaznim vrijednostima, bez nuspojava.
• Determinističke: Za isti ulaz, funkcija uvijek proizvodi isti izlaz.
• Skupe (Expensive): Funkcije čiji su izračuni računalno intenzivni ili dugotrajni (npr. rekurzivne funkcije, složeni izračuni).

Ovaj članak istražuje koncept memoizacije u JavaScriptu, ulazeći u različite obrasce, strategije predmemoriranja i poboljšanja performansi koja se mogu postići njenom implementacijom. Ispitat ćemo praktične primjere kako bismo ilustrirali kako učinkovito primijeniti memoizaciju u različitim scenarijima.

Razumijevanje memoizacije: Osnovni koncept

U svojoj srži, memoizacija koristi princip predmemoriranja. Kada se pozove memoizirana funkcija s određenim skupom argumenata, ona prvo provjerava je li rezultat za te argumente već izračunat i pohranjen u predmemoriji (obično JavaScript objekt ili Map). Ako se rezultat pronađe u predmemoriji, odmah se vraća. U suprotnom, funkcija izvršava izračun, pohranjuje rezultat u predmemoriju, a zatim ga vraća.

Ključna prednost leži u izbjegavanju suvišnih izračuna. Ako se funkcija pozove više puta s istim ulaznim podacima, memoizirana verzija izvršava izračun samo jednom. Sljedeći pozivi dohvaćaju rezultat izravno iz predmemorije, što rezultira značajnim poboljšanjima performansi, posebno za računalno skupe operacije.

Obrasci memoizacije u JavaScriptu

Nekoliko obrazaca se može koristiti za implementaciju memoizacije u JavaScriptu. Pogledajmo neke od najčešćih i najučinkovitijih:

1. Osnovna memoizacija pomoću zatvaranja (Closure)

Ovo je najosnovniji pristup memoizaciji. Koristi zatvaranje (closure) za održavanje predmemorije unutar dosega funkcije. Predmemorija je obično jednostavan JavaScript objekt gdje ključevi predstavljaju argumente funkcije, a vrijednosti predstavljaju odgovarajuće rezultate.

function memoize(func) {
 const cache = {};
 return function(...args) {
 const key = JSON.stringify(args); // Stvori jedinstveni ključ za argumente
 if (cache[key]) {
 return cache[key]; // Vrati rezultat iz predmemorije
 } else {
 const result = func.apply(this, args); // Izračunaj rezultat
 cache[key] = result; // Spremi rezultat u predmemoriju
 return result; // Vrati rezultat
 }
 };
}

// Primjer: Memoizacija funkcije faktorijela
function factorial(n) {
 if (n <= 1) {
 return 1;
 }
 return n * factorial(n - 1);
}

const memoizedFactorial = memoize(factorial);

console.time('First call');
console.log(memoizedFactorial(5)); // Računa i sprema u predmemoriju
console.timeEnd('First call');

console.time('Second call');
console.log(memoizedFactorial(5)); // Dohvaća iz predmemorije
console.timeEnd('Second call');

Objašnjenje:

• Funkcija `memoize` uzima funkciju `func` kao ulazni argument.
• Stvara objekt `cache` unutar svog dosega (koristeći zatvaranje).
• Vraća novu funkciju koja obavija originalnu funkciju.
• Ova funkcija omotač stvara jedinstveni ključ na temelju argumenata funkcije koristeći `JSON.stringify(args)`.
• Provjerava postoji li `key` u `cache`-u. Ako postoji, vraća predmemoriranu vrijednost.
• Ako `key` ne postoji, poziva originalnu funkciju, sprema rezultat u `cache` i vraća rezultat.

Ograničenja:

• `JSON.stringify` može biti spor za složene objekte.
• Stvaranje ključa može biti problematično s funkcijama koje prihvaćaju argumente u različitom redoslijedu ili koje su objekti s istim ključevima, ali različitim redoslijedom.
• Ne rukuje ispravno s `NaN` jer `JSON.stringify(NaN)` vraća `null`.

2. Memoizacija s prilagođenim generatorom ključeva

Kako bi se riješila ograničenja `JSON.stringify`, možete stvoriti prilagođenu funkciju za generiranje ključeva koja proizvodi jedinstveni ključ na temelju argumenata funkcije. To pruža veću kontrolu nad načinom indeksiranja predmemorije i može poboljšati performanse u određenim scenarijima.

function memoizeWithKey(func, keyGenerator) {
 const cache = {};
 return function(...args) {
 const key = keyGenerator(...args);
 if (cache[key]) {
 return cache[key];
 } else {
 const result = func.apply(this, args);
 cache[key] = result;
 return result;
 }
 };
}

// Primjer: Memoizacija funkcije koja zbraja dva broja
function add(a, b) {
 console.log('Računam...');
 return a + b;
}

// Prilagođeni generator ključeva za funkciju add
function addKeyGenerator(a, b) {
 return `${a}-${b}`;
}

const memoizedAdd = memoizeWithKey(add, addKeyGenerator);

console.log(memoizedAdd(2, 3)); // Računa i sprema u predmemoriju
console.log(memoizedAdd(2, 3)); // Dohvaća iz predmemorije
console.log(memoizedAdd(3, 2)); // Računa i sprema u predmemoriju (različit ključ)

Objašnjenje:

• Ovaj obrazac je sličan osnovnoj memoizaciji, ali prihvaća dodatni argument: `keyGenerator`.
• `keyGenerator` je funkcija koja uzima iste argumente kao i originalna funkcija i vraća jedinstveni ključ.
• To omogućuje fleksibilnije i učinkovitije stvaranje ključeva, posebno za funkcije koje rade sa složenim strukturama podataka.

3. Memoizacija pomoću objekta Map

Objekt `Map` u JavaScriptu pruža robusniji i svestraniji način pohrane predmemoriranih rezultata. Za razliku od običnih JavaScript objekata, `Map` vam omogućuje korištenje bilo kojeg tipa podataka kao ključeva, uključujući objekte i funkcije. To eliminira potrebu za pretvaranjem argumenata u string i pojednostavljuje stvaranje ključeva.

function memoizeWithMap(func) {
 const cache = new Map();
 return function(...args) {
 const key = args.join('|'); // Stvori jednostavan ključ (može biti sofisticiraniji)
 if (cache.has(key)) {
 return cache.get(key);
 } else {
 const result = func.apply(this, args);
 cache.set(key, result);
 return result;
 }
 };
}

// Primjer: Memoizacija funkcije koja spaja stringove
function concatenate(str1, str2) {
 console.log('Spajam...');
 return str1 + str2;
}

const memoizedConcatenate = memoizeWithMap(concatenate);

console.log(memoizedConcatenate('hello', 'world')); // Računa i sprema u predmemoriju
console.log(memoizedConcatenate('hello', 'world')); // Dohvaća iz predmemorije

Objašnjenje:

• Ovaj obrazac koristi `Map` objekt za pohranu predmemorije.
• `Map` vam omogućuje korištenje bilo kojeg tipa podataka kao ključeva, uključujući objekte i funkcije, što pruža veću fleksibilnost u usporedbi s običnim JavaScript objektima.
• Metode `has` i `get` objekta `Map` koriste se za provjeru i dohvaćanje predmemoriranih vrijednosti.

4. Rekurzivna memoizacija

Memoizacija je posebno učinkovita za optimizaciju rekurzivnih funkcija. Predmemoriranjem rezultata međukoraka izračuna možete izbjeći suvišne izračune i značajno smanjiti vrijeme izvršavanja.

function memoizeRecursive(func) {
 const cache = {};
 function memoized(...args) {
 const key = String(args);
 if (cache[key]) {
 return cache[key];
 } else {
 cache[key] = func(memoized, ...args);
 return cache[key];
 }
 }
 return memoized;
}

// Primjer: Memoizacija funkcije Fibonaccijevog niza
function fibonacci(memoized, n) {
 if (n <= 1) {
 return n;
 }
 return memoized(n - 1) + memoized(n - 2);
}

const memoizedFibonacci = memoizeRecursive(fibonacci);

console.time('First call');
console.log(memoizedFibonacci(10)); // Računa i sprema u predmemoriju
console.timeEnd('First call');

console.time('Second call');
console.log(memoizedFibonacci(10)); // Dohvaća iz predmemorije
console.timeEnd('Second call');

Objašnjenje:

• Funkcija `memoizeRecursive` uzima funkciju `func` kao ulazni argument.
• Stvara objekt `cache` unutar svog dosega.
• Vraća novu funkciju `memoized` koja obavija originalnu funkciju.
• Funkcija `memoized` provjerava je li rezultat za dane argumente već u predmemoriji. Ako jest, vraća predmemoriranu vrijednost.
• Ako rezultat nije u predmemoriji, poziva originalnu funkciju sa samom `memoized` funkcijom kao prvim argumentom. To omogućuje originalnoj funkciji da rekurzivno poziva memoiziranu verziju sebe.
• Rezultat se zatim pohranjuje u predmemoriju i vraća.

5. Memoizacija temeljena na klasi

Za objektno orijentirano programiranje, memoizacija se može implementirati unutar klase kako bi se predmemorirali rezultati metoda. To može biti korisno za računalno skupe metode koje se često pozivaju s istim argumentima.

class MemoizedClass {
 constructor() {
 this.cache = {};
 }

 memoizeMethod(func) {
 return (...args) => {
 const key = JSON.stringify(args);
 if (this.cache[key]) {
 return this.cache[key];
 } else {
 const result = func.apply(this, args);
 this.cache[key] = result;
 return result;
 }
 };
 }

 // Primjer: Memoizacija metode koja računa potenciju broja
 power(base, exponent) {
 console.log('Računam potenciju...');
 return Math.pow(base, exponent);
 }
}

const memoizedInstance = new MemoizedClass();
const memoizedPower = memoizedInstance.memoizeMethod(memoizedInstance.power);

console.log(memoizedPower(2, 3)); // Računa i sprema u predmemoriju
console.log(memoizedPower(2, 3)); // Dohvaća iz predmemorije

Objašnjenje:

• `MemoizedClass` definira svojstvo `cache` u svom konstruktoru.
• Metoda `memoizeMethod` uzima funkciju kao ulazni argument i vraća memoiziranu verziju te funkcije, pohranjujući rezultate u `cache` klase.
• To vam omogućuje selektivno memoiziranje određenih metoda klase.

Strategije predmemoriranja

Osim osnovnih obrazaca memoizacije, mogu se primijeniti različite strategije predmemoriranja kako bi se optimiziralo ponašanje predmemorije i upravljalo njenom veličinom. Ove strategije pomažu osigurati da predmemorija ostane učinkovita i da ne troši previše memorije.

1. Predmemorija najmanje nedavno korištenih (LRU)

LRU predmemorija izbacuje najmanje nedavno korištene stavke kada predmemorija dosegne svoju maksimalnu veličinu. Ova strategija osigurava da najčešće pristupani podaci ostanu u predmemoriji, dok se rjeđe korišteni podaci odbacuju.

class LRUCache {
 constructor(capacity) {
 this.capacity = capacity;
 this.cache = new Map();
 }

 get(key) {
 if (this.cache.has(key)) {
 const value = this.cache.get(key);
 this.cache.delete(key); // Ponovno umetni kako bi se označilo kao nedavno korišteno
 this.cache.set(key, value);
 return value;
 } else {
 return undefined;
 }
 }

 put(key, value) {
 if (this.cache.has(key)) {
 this.cache.delete(key);
 }
 this.cache.set(key, value);
 if (this.cache.size > this.capacity) {
 // Ukloni najmanje nedavno korištenu stavku
 const firstKey = this.cache.keys().next().value;
 this.cache.delete(firstKey);
 }
 }
}

// Primjer upotrebe:
const lruCache = new LRUCache(3); // Kapacitet 3

lruCache.put('a', 1);
lruCache.put('b', 2);
lruCache.put('c', 3);

console.log(lruCache.get('a')); // 1 (pomiče 'a' na kraj)

lruCache.put('d', 4); // 'b' se izbacuje

console.log(lruCache.get('b')); // undefined
console.log(lruCache.get('a')); // 1
console.log(lruCache.get('c')); // 3
console.log(lruCache.get('d')); // 4

Objašnjenje:

• Koristi `Map` za pohranu predmemorije, koji održava redoslijed umetanja.
• `get(key)` dohvaća vrijednost i ponovno umeće par ključ-vrijednost kako bi ga označio kao nedavno korištenog.
• `put(key, value)` umeće par ključ-vrijednost. Ako je predmemorija puna, uklanja se najmanje nedavno korištena stavka (prva stavka u `Map`-u).

2. Predmemorija najmanje često korištenih (LFU)

LFU predmemorija izbacuje najmanje često korištene stavke kada je predmemorija puna. Ova strategija daje prednost podacima kojima se češće pristupa, osiguravajući da ostanu u predmemoriji.

class LFUCache {
 constructor(capacity) {
 this.capacity = capacity;
 this.cache = new Map();
 this.frequencies = new Map();
 this.minFrequency = 0;
 }

 get(key) {
 if (!this.cache.has(key)) {
 return undefined;
 }

 const frequency = this.frequencies.get(key);
 this.frequencies.set(key, frequency + 1);
 return this.cache.get(key);
 }

 put(key, value) {
 if (this.capacity <= 0) {
 return;
 }

 if (this.cache.has(key)) {
 this.cache.set(key, value);
 this.get(key);
 return;
 }

 if (this.cache.size >= this.capacity) {
 this.evict();
 }

 this.cache.set(key, value);
 this.frequencies.set(key, 1);
 this.minFrequency = 1;
 }

 evict() {
 let minFreq = Infinity;
 for (const frequency of this.frequencies.values()) {
 minFreq = Math.min(minFreq, frequency);
 }

 const keysToRemove = [];
 this.frequencies.forEach((freq, key) => {
 if (freq === minFreq) {
 keysToRemove.push(key);
 }
 });

 const keyToRemove = keysToRemove[0];
 this.cache.delete(keyToRemove);
 this.frequencies.delete(keyToRemove);
 }
}

// Primjer upotrebe:
const lfuCache = new LFUCache(2);

lfuCache.put('a', 1);
lfuCache.put('b', 2);
console.log(lfuCache.get('a')); // 1, frekvencija(a) = 2
lfuCache.put('c', 3); // izbacuje 'b' jer je frekvencija(b) = 1
console.log(lfuCache.get('b')); // undefined
console.log(lfuCache.get('a')); // 1, frekvencija(a) = 3
console.log(lfuCache.get('c')); // 3, frekvencija(c) = 2

Objašnjenje:

• Koristi dva `Map` objekta: `cache` za pohranu parova ključ-vrijednost i `frequencies` za pohranu učestalosti pristupa svakom ključu.
• `get(key)` dohvaća vrijednost i povećava brojač učestalosti.
• `put(key, value)` umeće par ključ-vrijednost. Ako je predmemorija puna, izbacuje najmanje često korištenu stavku.
• `evict()` pronalazi minimalni broj učestalosti i uklanja odgovarajući par ključ-vrijednost iz oba `cache` i `frequencies`.

3. Istek na temelju vremena

Ova strategija poništava predmemorirane stavke nakon određenog vremenskog razdoblja. To je korisno za podatke koji s vremenom postaju zastarjeli. Na primjer, predmemoriranje odgovora API-ja koji su valjani samo nekoliko minuta.

function memoizeWithExpiration(func, ttl) {
 const cache = new Map();
 return function(...args) {
 const key = JSON.stringify(args);
 const cached = cache.get(key);

 if (cached && cached.expiry > Date.now()) {
 return cached.value;
 } else {
 const result = func.apply(this, args);
 cache.set(key, { value: result, expiry: Date.now() + ttl });
 return result;
 }
 };
}

// Primjer: Memoizacija funkcije s vremenom isteka od 5 sekundi
function getDataFromAPI(endpoint) {
 console.log(`Dohvaćam podatke s ${endpoint}...`);
 // Simuliraj API poziv s kašnjenjem
 return new Promise(resolve => {
 setTimeout(() => {
 resolve(`Podaci s ${endpoint}`);
 }, 1000);
 });
}

const memoizedGetData = memoizeWithExpiration(getDataFromAPI, 5000); // TTL: 5 sekundi

async function testExpiration() {
 console.log(await memoizedGetData('/users')); // Dohvaća i sprema u predmemoriju
 console.log(await memoizedGetData('/users')); // Dohvaća iz predmemorije

 setTimeout(async () => {
 console.log(await memoizedGetData('/users')); // Ponovno dohvaća nakon 5 sekundi
 }, 6000);
}

testExpiration();

Objašnjenje:

• Funkcija `memoizeWithExpiration` uzima funkciju `func` i vrijednost vremena života (TTL) u milisekundama kao ulazne argumente.
• Pohranjuje predmemoriranu vrijednost zajedno s vremenskom oznakom isteka.
• Prije vraćanja predmemorirane vrijednosti, provjerava je li vremenska oznaka isteka još uvijek u budućnosti. Ako nije, poništava predmemoriju i ponovno dohvaća podatke.

Poboljšanje performansi i razmatranja

Memoizacija može značajno poboljšati performanse, posebno za računalno skupe funkcije koje se ponavljano pozivaju s istim ulaznim podacima. Poboljšanja performansi su najizraženija u sljedećim scenarijima:

• Rekurzivne funkcije: Memoizacija može dramatično smanjiti broj rekurzivnih poziva, što dovodi do eksponencijalnih poboljšanja performansi.
• Funkcije s preklapajućim potproblemima: Memoizacija može izbjeći suvišne izračune pohranjivanjem rezultata potproblema i njihovim ponovnim korištenjem kada je to potrebno.
• Funkcije s čestim identičnim ulazima: Memoizacija osigurava da se funkcija izvršava samo jednom za svaki jedinstveni skup ulaznih podataka.

Međutim, važno je uzeti u obzir sljedeće kompromise pri korištenju memoizacije:

• Potrošnja memorije: Memoizacija povećava upotrebu memorije jer pohranjuje rezultate poziva funkcija. To može biti problem za funkcije s velikim brojem mogućih ulaznih podataka ili za aplikacije s ograničenim memorijskim resursima.
• Poništavanje predmemorije: Ako se temeljni podaci promijene, predmemorirani rezultati mogu postati zastarjeli. Ključno je implementirati strategiju poništavanja predmemorije kako bi se osiguralo da predmemorija ostane usklađena s podacima.
• Složenost: Implementacija memoizacije može dodati složenost kodu, posebno za složene strategije predmemoriranja. Važno je pažljivo razmotriti složenost i održivost koda prije korištenja memoizacije.

Praktični primjeri i slučajevi upotrebe

Memoizacija se može primijeniti u širokom rasponu scenarija za optimizaciju performansi. Evo nekoliko praktičnih primjera:

• Front-end web razvoj: Memoiziranje skupih izračuna u JavaScriptu može poboljšati odzivnost web aplikacija. Na primjer, možete memoizirati funkcije koje izvode složene DOM manipulacije ili koje izračunavaju svojstva rasporeda.
• Poslužiteljske aplikacije: Memoizacija se može koristiti za predmemoriranje rezultata upita bazi podataka ili API poziva, smanjujući opterećenje poslužitelja i poboljšavajući vrijeme odziva.
• Analiza podataka: Memoizacija može ubrzati zadatke analize podataka predmemoriranjem rezultata međukoraka izračuna. Na primjer, možete memoizirati funkcije koje izvode statističku analizu ili algoritme strojnog učenja.
• Razvoj igara: Memoizacija se može koristiti za optimizaciju performansi igara predmemoriranjem rezultata često korištenih izračuna, kao što su detekcija sudara ili pronalaženje putanja.

Zaključak

Memoizacija je moćna tehnika optimizacije koja može značajno poboljšati performanse JavaScript aplikacija. Predmemoriranjem rezultata skupih poziva funkcija možete izbjeći suvišne izračune i smanjiti vrijeme izvršavanja. Međutim, važno je pažljivo razmotriti kompromise između poboljšanja performansi i potrošnje memorije, poništavanja predmemorije i složenosti koda. Razumijevanjem različitih obrazaca memoizacije i strategija predmemoriranja, možete učinkovito primijeniti memoizaciju za optimizaciju svog JavaScript koda i izgradnju aplikacija visokih performansi.