Asynchronní a odložené zpracování JavaScriptu – atributy async a defer

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.

Mgr. Tomáš Matonoha

Zabývám se vývojem webových stránek s redakčním systémem WordPress. Programuji také webové stránky a eshopy na míru pomocí PHP a frameworku Nette. Zajímá mě responzivní design a moderní webové technologie: HTML5, CSS3, LESS, PHP, MySQL, jQuery a Twitter Bootstrap.

7 komentářů u “Asynchronní a odložené zpracování JavaScriptu – atributy async a defer

  1. Od tohohle jsem rychle upustil. Pořád to dělalo problémy. Možná proto, že jsem to neuměl nastavit, ale mnohem lepší bylo nakonec prostě zapnout gzip a kešování skriptů. async mi v nějakém prohlížeči nešlo a defer jsem zas neuměl pořádně nastavit.

    Používám totiž WP a tam buď dám defer před vše (úpravou kódu) nebo ho nedám nikam. Nebo jsem minimálně nepřišel na to, jak dát defer jen na nedůležité skripty a ty důležité (jako na zpracování formuláře) nechat načítat obyčejné.

    Asi nevíš jak bych to mohl vyřešit, vit?

  2. Pingback: O rychlosti webu, asynchronním načítání, kritických CSS a osudu zlatých kolovrátků ⁄ Jan Bien, webmistr

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Můžete používat následující HTML značky a atributy: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>