5 moderních funkcí JavaScriptu, které změní váš kód

Jak správně využít cache a CDN Cache mechanismy umožňují prohlížeči uložit si kopie souborů, takže při opakované návštěvě nemusí stahovat vše znovu. Nastavte si délku platnosti pro statické soubory, jako jsou obrázky, CSS a JavaScript. Pro dynamický obsah, který se mění podle přihlášení, použijte kratší dobu. Důležité je také správně nastavit hlavičky pro server, aby je prohlížeč respektoval. Bez nich může cache ignorovat.

Dalším častým problémem jsou nevyužité skripty a styly. Mnoho šablon nahraje celou knihovnu, i když potřebujete jen jednu funkci. Projděte si zdrojový kód a odstraňte vše, co se nepoužívá. Pokud používáte externí písma, zvažte jejich omezení na dva řezy. Každý soubor s písmem představuje další požadavek na server. Nezapomínejte ani na takzvané render-blocking prvky – skripty, které se načítají před samotným obsahem. Stačí je přesunout na konec stránky nebo je načíst až po interakci uživatele.

Indexy: jak je správně navrhnout a kdy se jim vyhnout Indexy jsou nejúčinnějším nástrojem, ale jen pokud je používáte správně. Vytvářejte je hlavně na sloupcích, které se objevují v podmínce WHERE, JOIN nebo ORDER BY. Mějte na paměti, že index na sloupec s nízkou selektivitou, jako je pohlaví nebo stav, nemusí pomoci – databáze stejně projde velkou část tabulky. Pro složené podmínky vytvářejte složené indexy. Důležité je pořadí sloupců v indexu. Dejte ten s vyšší selektivitou jako první. Například pro dotaz WHERE status = 'active' AND created_at >NOW() je lepší index (status, created_at) než (created_at, status), pokud status rozlišuje více hodnot než date.

Další užitečnou funkcí je spread operátor. Pomocí ... snadno zkopírujete pole nebo objekt: const newArray = [...oldArray];, ale pozor – jedná se o mělkou kopii. Vnořené objekty sdílejí referenci a změna v kopii ovlivní původní data. Pro hlubokou kopii použijte structuredClone() nebo knihovny, ale ty jsou mimo rozsah článku. Spread se hodí i pro slučování objektů ...a, ...b , ale pořadí záleží – pozdější vlastnosti přepisují dřívější.

Samotný test se pak píše podle jednoduchého vzorce: připrav, proveď, ověř. V přípravě vytvoříte vstupní data, v provedení zavoláte testovanou funkci a v ověření porovnáte výsledek s očekávanou hodnotou. Tady se často dělá první velká chyba — lidé testují tři různé věci v jednom bloku a pak nevědí, která z nich selhala. Držte se pravidla jeden test = jedna logická situace. Pokud potřebujete pokrýt víc případů, napište víc testů.

Pokud máte návštěvníky z různých zemí, zvažte použití CDN – sítě, která kopíruje obsah na servery po celém světě. Uživatel tak stahuje data z nejbližšího uzlu, což zkrátí dobu odezvy. Než se ale pustíte do CDN, ověřte si, že váš hosting podporuje potřebné technologie. U malých webů s lokální návštěvností nemusí být CDN přínosné – naopak může přidat zpoždění při komunikaci mezi uzly. Vždy testujte reálný přínos, ne pouze teoretické hodnoty.

Třetí chyba: zapomenete nábytek na míru monitoring a zpětnou vazbu. DevOps není jen o tom, aby se nasazovalo rychle, ale aby se rychle také zjistilo, že něco nefunguje. Zaveďte si jednoduché metriky – kolik času uplyne od nasazení do objevení chyby, jak dlouho trvá oprava, kolik nasazení skončí rollbackem. Tyto údaje vám ukážou, jestli se zlepšujete. Bez nich budete jen hádat, co funguje. rekonstrukce koupelny krok za krokemčněte s jedním dashboardem, který zobrazuje stav produkce, a přidejte k němu automatické upozornění na výpadek.

Největším zdrojem pomalosti bývají obrázky. Fotografie z mobilu mají často několik megabajtů, a přesto je web zobrazí v původní velikosti. Řešením je komprese a změna velikosti před nahráním. Formát WebP nebo AVIF nabízí výrazně menší objem při zachované kvalitě. Pokud používáte systém pro správu obsahu, nainstalujte si automatickou kompresi. Pozor ale na příliš agresivní nastavení – u textových grafik nebo logotypů vznikají nevzhledné artefakty, které působí neprofesionálně.

Promises a async/await jsou standard pro asynchronní kód. Místo řetězení .then().catch() můžete psát async function load() try const data = await fetch(url); catch (e) { ... } . Vyhněte se časté chybě – zapomenutí await u volání funkce vracející Promise, což vede k tomu, že pracujete s objektem Promise místo výsledku. Pokud potřebujete paralelní volání, použijte Promise.all, ale chraňte se před chybou jednoho z nich – buď přidejte .catch na každý promise, nebo použijte Promise.allSettled.

Začněme destructuringem, tedy destrukturalizací přiřazení. Místo ručního kopírování hodnot z objektu do proměnných můžete napsat const name, age = user;. To platí i pro pole: const [first, second] = array;. Pozor na výchozí hodnoty – pokud vlastnost neexistuje, dostanete undefined. Použijte const name = 'Neznámý' = user;. Typická chyba: destructuring vnořených objektů bez kontroly existence, což vede k chybě Cannot read property.