Zpracování JavaScriptu na stránce je jedna z nejčastějších „brzd“ vykreslování stránky. Proces funguje tak, že prohlížeč zpracovává kód stránky shora dolů. Když narazí na značku <script>, prohlížeč zastaví vykreslování, stáhne externí soubor (je-li definován atributem src) a JavaScript zpracuje.

Jak asi tušíte, když na začátku stránky umístíte deset externích knihoven (nejlépe nějaké velké), prohlížeč začne jednu za druhou stahovat (moderní prohlížeče však stahují několik skriptů zároveň),  zpracovávat a až po zpracování všech začne vykreslovat další obsah. Proto je vhodné umístit všechny externí JavaScript před značku </body>.

Další vhodná věc je sloučit všechny externí skripty do jednoho, aby se minimalizoval počet HTTP požadavků. Každý požadavek stojí určitou režii (o tom někdy příště). Další optimalizace, která sníží velikost skriptů je jejich minifikace. Ta odstraní zbytečné komentáře, mezery, nové řádky atd a zmenší tak výslednou velikost souboru.

Odložené zpracování – atribut defer

Použítí tohoto atributu je následující:

<script src="test.js" defer></script>

Pokud prohlížeč narazí u externího skriptu na atribut defer, začne paralelně stahovat skript bez zastavení vykreslování. Vykonání tohoto skriptu pak nastane po dokončení nahrání DOM (před událostí DOMContentLoaded). Ve skriptech s atributy defer byste neměli používat document.write nebo jiné praktiky manipulující s DOM strukturou.

Při použití tohoto atributu prohlížeče zajišťují, že skripty budou vykonány v tom pořadí, v jakém byly definovány. Tato vlastnost však nemusí platit v případě Internet Exploreru.

Přestože je tento atribut v prohlížečích široce podporován, neměli byste na něj spoléhat.

Asynchronní zpracování – atribut async

Tento atribut byl představen v HTML5. Použití je následující:

<script src="test.js" async></script>

Atribut async je totožný s atributem defer s tím rozdílem, že zpracování souboru začne v okamžiku, kdy je stažen a připraven. Nahrávání externího skriptu se tedy chová asynchronně.

Tohoto atributu využívá např. kód Google Analytics.

Další techniky

Následující dynamické vložení JavaScriptu způsobí neblokující stažení. Zpracování tohoto externího skriptu nastane ihned po jeho stažení.

var script = document.createElement('script');
script.src = 'test.js';
document.getElementsByTagName('head')[0].appendChild(script);

Všechny výše uvedené techniky zdrží událost window.onload (kromě Internet Exploreru). Pokud chcete stáhnout a zpracovat externí JavaScript až po této události, můžete to udělat následujícím způsobem:

window.onload = function() {
	var script = document.createElement('script');
	script.src = 'test.js';
	document.getElementsByTagName('head')[0].appendChild(script);
};

 

Podpora v prohlížečích

Podpora uvedených atributů v prohlížečích je od následujících verzí:

Atribut	Chrome	Firefox	Internet Explorer	Opera	Safari
defer	Ano	3.5 (1.9.1)	4	Ne	Ano
async	Ano	3.6 (1.9.2)	10	Ne	Ano

Opera podporuje atribut defer a async pouze pokud je zapnuté Opera Turbo.