Peter Širka - Brutal Web Developer
Pár tipov ako lepšie optimalizovať JavaScript

Tue Aug 30 2016 14:30:44 GMT+0200 (Central European Summer Time)

Pár tipov ako lepšie optimalizovať JavaScriptový kód

Rozhodol som sa spísať niekoľko tipov pre lepšiu optimalizáciu JavaScriptového kódu, tieto tipy môžete využiť či už na client-side alebo server-side v Node.js.

1. optimalizácia array (polí)

Opakovanie je matka múdrosti a veľa programátorov zabúda na to, že pri cykloch sa vždy (každým loopom) musí zistiť dĺžka poľa, čo vedie k zníženiu performance a zaťaženiu CPU.

// Pomalý zápis
var arr = [...];
for (var i = 0; i < arr.length; i++) {

}

// Lepší zápis
var arr = [...];
for (var i = 0, length = arr.length; i < length; i++) {

}

2. Cacheovanie objektov

Priznám sa, že ešte u nikoho som podobnú optimalizáciu nevidel a dovolím si tvrdiť, že práve podobné optimalizácie vedia zvýšiť performance a znížiť zaťaženie CPU + RAM. V ukážke je znázornený Total.js (Node.js) controller.

// Pomalý zápis
function nejaka_akcia_ktora_vracia_json() {
    this.json({ success: true });
}

// Brutálny zápis
const response = { success: true };

function nejaka_akcia_ktora_vracia_json() {
    this.json(response);
}

Podobný zápis môžete aplikovať aj na Array (polia).

3. Priraďovanie hodnôt je rýchlejšie ako vytváranie objektov

Tento tip naväzuje na tip č.2 s tým, že priraďovanie hodnôt je oveľa rýchlejšie ako vytváranie objektov s následným priradením hodnoty. Podobnú optimalizáciu určite využijete aj v Express.js alebo inom podobnom Node.js frameworku.


// Pomalý zápis
function nejaka_akcia_ktora_vracia_json() {
    this.json({ success: this.query.success === '1' });
}

// Brutálny zápis
const response = { success: true };

function nejaka_akcia_ktora_vracia_json() {
    response.success = this.query.success === '1';
    this.json(response);
}

Metóda SUCCESS() v Total.js používa rovnakú optimalizáciu.

4. Používate "delete" pred "JSON.stringify()"?

Ak áno, mám pre Vás skvelý tip, ktorý Vám dokáže zvýšiť performance. Kľúčové slovo delete je veľmi nápomocné, ale je aj veľmi pomalé. Niekedy proste stačí priradiť hodnotu undefined do nežiadúcej property a výsledok môžete mať rovnaký ako za pomoci delete.

// Pomalý zápis
var obj = { name: 'Peter', age: 30 };
delete obj.name;
console.log(JSON.stringify(obj));

// Brutálny zápis
var obj = { name: 'Peter', age: 30 };
obj.name = undefined;
console.log(JSON.stringify(obj));

5. Cacheovanie dátumu tiež pomáha

Sú prípady, kedy nepotrebujete absolútne presný čas, ale stačí Vám rozdiel +/- 1 minúta. V Total.js to riešim cez property F.datetime ktorá je aktualizovaná každú minútu o aktuálny dátum a čas. Takže ak nepoužívate Total.js a robíte s časom, ktorý nepotrebujete mať na sekundu presný, tak môžete použiť nasledujúci tip na zvýšenie performance:

// V nižšie uvedenej premennej budeme mať vždy uložený aktuálny čas v rozmedzí +/- 30 sekúnd.
var datetime = new Date();
setInterval(function() {
    datetime = new Date();
}, 30000);

6. "string.indexOf()" a "string.lastIndexOf()" vs reguárny výraz

Metódy string.indexOf() a string.lastIndexOf() sú rýchlejšie ako regulárny výraz a doporučujem ich použiť pre jednoduché vyhľadávacie operácie. Taktiež je dobré rozlišovať použitie indexOf() a lastIndexOf(), pretože tu viete získať ešte lepšiu performance, stačí sa zamyslieť, kde najčastejšie sa môže vyskytovať Vami hľadaná fráza - či na začiatku alebo na konci.

7. Menšie funkcie = lepšia performance

Tu nebude nič lepšie ako odkaz na tento článok: https://top.fse.guru/nodejs-a-quick-optimization-advice-7353b820c92e. Chcem len pripomenúť, že táto optimalizácia sa týka len V8.

8. "function.call" vs "function.apply"

Iba v rýchlosti pripomeniem, že function.call() je rýchlejšie ako function.apply() a obidve volania sú niekoľko násobne pomalšie, ako volanie funkcie bez zmeny contextu.


Značky


Posledné blogy
Brutálny polrok 2018
Fri Jun 22 2018 09:48:21 GMT+0200 (Central European Summer Time)
Konferencia/Workshop: TotalCon 2017
Thu Nov 16 2017 22:06:55 GMT+0100 (Central European Standard Time)
CodeCon 2017 z pohľadu organizátora
Sun Apr 09 2017 09:27:34 GMT+0200 (Central European Summer Time)
Elektrický bicykel KTM MACINA KAPOHO SLX 2017
Fri Mar 31 2017 15:32:37 GMT+0200 (Central European Summer Time)
Total.js platforma - školenia
Mon Jan 16 2017 18:35:05 GMT+0100 (Central European Standard Time)

Posledné komentáre
Thank you for your work! You are the great friend, great person and great expert!
Jozef Gula
Mon Jun 25 2018 08:02:14 GMT+0200 (Central European Summer Time)
It's been an absolute pleasure collaborating with you Peter, I've learned so much from Total.js a...
Pedro Costa
Fri Jun 22 2018 19:18:22 GMT+0200 (Central European Summer Time)
Tento skateboard až tak kopec nerieši, pretože má 2 silné motory. So mnou vyšiel všade, kde som b...
Peter Širka
Fri Jul 14 2017 09:30:56 GMT+0200 (Central European Summer Time)
Dobry den jak se vypořadavá s kopci ?
Lukáš
Thu Jul 13 2017 20:44:43 GMT+0200 (Central European Summer Time)
Chlapci z firmy Nazaret Pánu Bohu ďakujú a Tebe blahoželajú k dobre odvedenej práci. Super Peťo, ...
Tomáš
Thu Dec 15 2016 08:08:15 GMT+0100 (Central European Standard Time)