Umístění scriptu na stránce

AndreaAndrea

Je to už přes 30 let, co Tim Berners-Lee a Robert Cailliau specifikovali jazyk HTML, který se stal de facto standardem pro pro tvorbu webů. Od té doby byl jazyk několikrát aktualizován, až jsme se dostali k nejnovější verzi HTML5.

Kód JavaScriptu můžete do HTML dokumentu vložit pomocí speciální značky/tagu <script>. Tento tag prohlížeče tradičně načítají a spouštějí na základě umístění v souboru.

Co se týče jeho umístění v dokumentu, můžeme ho vložit do hlavičky mezi značky <head> a </head> nebo do sekce těla mezi tagy <body> a <body>. Které místo je lepší? To záleží na tom, čeho se snažíme dosáhnout.

Umístění do hlavičky

Nevýhodou umístění scriptu do hlavičky je zpomalení zpracování zbytku těla stránky. Dochází k situaci, kdy se nejprve vykoná script a tím se zablokuje parsování, dokud nejsou skripty vykonány a zpracovány popř. ještě stáhnuty. To způsobuje stav, že návštěvník do té doby vidí jen prázdnou stránku nebo jen část obsahu stránky.

Tento jev se dokonce dříve měřil metrikou First Meaningful Paint (první smysluplné vykreslení), kterou se posuzovala rychlost webu. Dnes se sleduje obecnější metrika LCP (největší vykreslení obsahu), která měří i vykreslení části obsahu stránky, které by mělo proběhnout do 2,5 sekundy.

Vložení do body

JavaScript má přístup k HTML elementům, které jsou definovány v dokumentu před značkou skriptu. Pokud skript pokusí přístoupít k elementu, který ještě není definován, dostaneme chybu.

Pokud chceme zajistit, že skript bude načten až poté, co byla načtena celá struktura HTML stránky, můžeme skript umístit jako poslední element v <body>. Tento přístup pak může výrazně snižit čas načítání stránky a zlepšuje uživatelskou zkušenost, protože parser nic neblokuje.

Použití asynchronního nebo odloženého načítání

Další možnost jak ovlivnit načtení a spuštění scriptu bez ohledu na pozici na stránce je použití atributů async nebo defer.

Tyto atributy říkají prohlížeči, že může pokračovat v parsování HTML, zatímco se skripty stahnou a načtou na pozadí. Rozdíl mezi těmito atributy je v tom, kdy se začnou skripty provádět:

<script defer src="script.js">
<script async src="script.js">

Jsou případy, kdy potřebujeme, aby se kód spustil co nejdříve, ale jindy také až po dokončení načtení stránky.

Synchronní skripty zpožďují načítání a vykreslování DOM a tímto způsobem načítání skriptu se neblokuje konstrukce DOM a vykreslování stránky. Výsledkem je, že uživatel vidí stránku dříve.

Atribut defer

Atribut defer oddaluje spuštění skriptu po úplném dokončení parsování HTML, ale před událostí DOMContentLoaded. I když se tag <script> vloží na úplný začátek stránky, bude vykonán stejně jako když by se vložil na konec stránky.

Tedy defer zaručuje, že nebude blokovat parser a může tedy výrazně urychlit načítání stránky.

Atribut async

Jak název atributu napovídá, dovoluje nám asynchronní načítání.

V tomto režimu, prohlížeč script stáhne a spustí ho ihned, jakmile bude k dispozici. Skripty s atributem async se spustí při první příležitosti po dokončení stahování a před load eventem na window.

Asynchronní skripty nebudou provedeny v pořadí, v jakém se načítají v HTML. To může mít špatný dopad na skripty, které vyžadují určité pořadí spuštění a mají závislosti na jiných skriptech nebo na načtení určitých částí stránky. Tím mohou i přerušit vytváření DOM, pokud dokončí stahování v době, kdy parser ještě pracuje.

Skripty třetích stran se často vyplácí načítat asynchronně.

Dynamické načítání skriptů

Dalším způsobem, jak optimalizovat načítání skriptů, je dynamické načítání. Tento přístup umožňuje načítat skripty pouze tehdy, když jsou potřebné, což může zlepšit rychlost načítání stránky a minimalizovat zátěž prohlížeče. To lze provést pomocí JavaScriptu, který vytvoří nový element <script> a nastaví jeho atributy. Ukázka kódu:

function loadScript(src, callback) {
	var script = document.createElement('script');
	script.src = src;
	script.onload = function() {
		callback();
	};
	document.head.appendChild(script);
}

loadScript('path/to/script.js', function() {
	console.log('Skript načten a připraven k použití.');
});

Lazy-loading

Lazy-loading je technika používaná k urychlení načítání stránky tím, že odložuje načítání určitých prvků stránky, dokud nejsou potřeba. Skripty se načtou, až když jsou potřeba, a ne na začátku načítání stránky. Tento postup snižuje dobu, po kterou se načítá hlavní obsah stránky, díky snížení počtu HTTP požadavků.