V nejstarších verzích IE (6 a níže) asynchronní načítání bohužel nefunguje, ale takoví uživatelé už prakticky nejsou. Všechny ostatní prohlížeče a služby úspěšně používají moderní rychlé stahování webové stránky.

Async and Defer – strategie načítání JavaScriptu

JavaScript je nedílnou součástí každé moderní webové aplikace a strategie, které zvolíme pro načítání, přímo ovlivňují výkon této aplikace. V tomto článku se pokusíme porozumět důležitým rozdílům mezi jednotlivými přístupy, klady a zápory spolu s dopady na výkon a jak optimalizovat interakci se stránkou a dobu načítání.

Pro demonstraci vytvořím webovou stránku skládající se z následujících externích závislostí. Zvláštní pozornost věnujte příslušné velikosti souborů, protože tomu je přímo úměrná doba stahování souborů.

• HTML - stránka ~ 1 MB. Obsahuje skutečné označení/obsah pro zobrazení dynamického výstupu z JavaScriptu.
• Obrázek – image1.png ~ 5 Mb
• JavaScript - file1.JS ~3MB je jádro (hlavní soubor) javascriptu a závisí na analýze HTML. Je potřeba, aby se na stránce zobrazoval nějaký dynamický obsah nebo aby se na stránku připojila reakční/úhlová komponenta.
• JavaScript - file2.js ~460B - Malý, nezávislý javascriptový soubor, který spolupracuje s dom.
• JavaScript – file3.js ~ 1,5 MB je sekundární soubor js a závisí na tom, že soubor 1.js spustí nějaký kód s nižší prioritou. Tento kód není okamžitě vyžadován pro vykreslování stránky a interakci uživatele; ukazuje ikony sociální sítě, komentáře, online podpora, spouštění některých analytických úloh atd.

Approach-1 [skripty v hlavičce]

V prvním případě načteme všechny značky skriptů do sekce head našeho HTML. Níže je snímek obrazovky analýzy síťové karty chromované stránky, abyste byli připraveni na interakci uživatele.

Klady:

Pořadí provádění kódu různých souborů JS bude zachováno v pořadí, v jakém byly soubory zahrnuty do kódu HTML. V aktuálním příkladu, i kdyby byly soubory2 a soubor3 načteny před souborem1, příkaz k provedení by byl správný.

mínusy:

V tomto scénáři se analýza HTML pozastaví, dokud nebudou načteny, analyzovány a provedeny všechny 3 skripty v sekci head. Prázdný Bílá obrazovka se zobrazí uživateli, i když byl soubor HTML již načten [ale nebyl analyzován]. To rozhodně není dobré pro použitelnost.

Žádný z výše uvedených skriptů nebude schopen přistupovat ke stránce HTML a manipulovat s ní, protože DOM ještě není připraven. Jeden z možné řešení Způsob, jak tento problém vyřešit, je naslouchat události DOMContentLoaded a poté spustit kód. Událost DOMContentLoaded se spustí po úplném načtení a analýze původního dokumentu HTML, aniž by se čekalo na dokončení načítání šablon stylů, obrázků nebo obrázků.

Approach-2 [skripty na konci]

Abychom překonali 2 problémy, kterým čelíme v prvním přístupu, načtěte všechny 3 skripty do spodní části značky body.

Klady: Kód HTML je analyzován před načtením skriptů, takže uživatel bude moci okamžitě vidět skutečný obsah, aniž by musel čekat na skripty.

Protože všechny skripty jsou spouštěny po analýze HTML, mohou všechny přistupovat k DOM pro jakoukoli manipulaci. Pořadí provádění skriptu je zachováno.

mínusy:

Neexistuje žádný nárůst výkonu jako takový.

Přístup-3 [pomocí atributu Async]

HTML5 zavedlo atribut async script, který pomáhá při načítání příslušných souborů skriptů paralelně do jiného vlákna, aniž by to ovlivnilo analýzu HTML.

Odpovídající skript však bude analyzován a spuštěn, jakmile dokončí načítání, bez ohledu na to, zda je analýza HTML dokončena nebo ne, a bude mít odkaz na prvek DOM až do tohoto konkrétního bodu.

Zde můžete jasně vidět, že soubor2.js byl načten dříve HTML soubor. Zatímco však prohlížeč stahoval soubor2, nepozastavil analýzu HTML, a proto v době, kdy byla provedena, měl odkaz na zástupný symbol html pro vložení dynamického obsahu.

Klady: Vzhledem k tomu, že skripty jsou načteny do jiného vlákna, nebude analýza HTML pozastavena a uživatel bude moci vidět skutečný obsah namísto bílé prázdné obrazovky. Hlavní nárůst výkonu, tj. čas DOMContentLoaded, se snížil z 47,68 sekund na pouhých 21,12 sekund a představuje ~55% zisk.

mínusy:

Sekvence provádění JS není zachována. Provádí se v příslušném pořadí načítání, nikoli v sekvenci skriptů obsažených v HTML. Podpora prohlížeče – Není podporováno ve starších webových prohlížečích, tj. IE 9 a nižších.

Co se stane, když je JS načten dříve, než bude k dispozici prvek DOM? Bude vyvolána chyba.

Poznámka: umísťování skriptů s atributem async na konec části těla by bylo zbytečné a ekvivalentní přístupu-2.

Přístup 4 [pomocí atributu Odložit]

Atribut odložit způsobí, že skript bude proveden až po dokončení analýzy HTML. Jeden velmi důležitý bod Zde je třeba zvážit, že Chrome zatím nepodporuje odklad a nemá žádný vliv na trvání DOMContentLoaded. Na konci analýzy HTML však provádí skripty.

Klady:

Sekvence importu skriptu je zachována. Soubor3.js se tedy spustí až po dokončení stahování a provedení souboru1, i když byl soubor3 načten dříve.

Podpora prohlížeče - má nejlepší podporu prohlížeče ve srovnání s atributem async, tedy částečně podporované v IE v6-9

Skripty mají přístup k DOM, protože se spouští až po analýze úplného HTML.

mínusy:

Původně jsem si myslel, že zpoždění bude Nejlepší volba než async, ale později zjistil, že Chrome to zatím nepodporuje [verze 71.0.3578.98] a nemá žádný vliv na trvání DOMContentLoaded.

Ve Firefoxu však funguje podle očekávání s výrazným vylepšením výkonu.

závěry

Je vhodnější umístit značky skriptu do sekce head s atributem async pro knihovny třetích stran, které závisí na Google Analytics, Google reCAPTCHA nebo cokoli jiného, ​​co nevyžaduje přístup DOM, protože odpovídající skripty se načítají paralelně, ale spouštějí se okamžitě.

Odložit použijte pro všechny ostatní skripty načtené v sekci head, protože budou také načteny paralelně, ale budou provedeny až poté, co bude dokončena analýza HTML a DOM bude připraven k přístupu/manipulaci.

Můžete také použít kombinaci posluchače DOMContentLoaded uvnitř asynchronních skriptů k pozdějšímu spuštění funkcí. Své názory a poznatky zanechte prosím v komentářích a já je s vámi rád prodiskutuji.

Autorem tohoto materiálu jsem já - Yuriy Pakholkov. Poskytuji služby při psaní programů v Javě, C++, C# (i poradenství k nim) a tvorbě webových stránek. Pracuji se stránkami na CMS OpenCart, WordPress, ModX a self-write. Kromě toho pracuji přímo s JavaScriptem, PHP, CSS, HTML - tedy mohu dokončit vaše stránky nebo pomoci s programováním webu.

Dobrý den, přátelé! Věděli jste, že načítání JavaScriptu je jednou z největších překážek ve výkonu webových stránek? Dnes je mým hlavním úkolem vysvětlit, co je to skript a jak ovlivňuje rychlost a výkon webu.

Prohlížeč, který načte značku skriptu, přestane vykreslovat stránku, dokud se skript nenačte a nespustí. Stránka je zablokována a prohlížeč několik sekund nereaguje na akce uživatele. Doba zpoždění závisí na několika faktorech:

• konfigurace,
• rychlost připojení k internetu,
• velikost souboru a další...

Z tohoto důvodu analyzátor rychlosti webu Google PageSpeed ​​​​Insights doporučuje odstranit blokující kód JavaScript z horní části stránky. Je dobrým zvykem umístit skripty na konec webu, například před uzavírací značku nebo nastavení asynchronního načítání.

Pokud kód skriptu ovlivňuje zobrazení horní části webu, nevytahujte jej do samostatného souboru, ale vložte jej přímo do HTML.

JS může změnit obsah webu a dokonce přesměrovat na jinou adresu URL. V tomto případě zahrnutí skriptu na konec dokumentu způsobí, že se stránka „škubne“ načtením nových nebo změnou stávajících prvků v horní části.

Použití atributů async a defer na značku skriptu

Pojďme pochopit, co je asynchronní a odložené Práce s JavaScriptem a jaký je zásadní rozdíl mezi asynchronními a odloženými atributy. Nejprve však zvažte posloupnost zpracování dokumentu, kdy normální připojení značka skriptu.

V dobrý příklad budu používat následující konvence:

- zpracování stránky
- načítání skriptu
- provedení skriptu

Posloupnost zpracování je tedy následující:

Parsování HTML kódu je přerušeno během načítání a provádění skriptu, poté pokračuje. Při zobrazení webové stránky došlo ke zpoždění.

atribut odložit

Atribut odložit umožňuje prohlížeči začít načítat soubory js paralelně bez zastavení dalšího zpracování stránky. K jejich provedení dojde po úplné analýze objektový model dokument (z anglického Document Object Model, zkráceně DOM), přičemž prohlížeč zaručuje konzistenci na základě pořadí připojování souborů.

asynchronní atribut

Podpora atributu async byla zavedena v HTML5, umožňuje prohlížeči paralelně načítat soubory js a spouštět je ihned po načtení, bez čekání na zpracování zbytku stránky.

Schéma sekvence zpracování:

Toto je asynchronní stahování. Atribut se doporučuje pro skripty, které výrazně neovlivňují zobrazení dokumentu. Patří mezi ně počítadla shromažďování statistik (Google Analytics, Yandex Metrica), kódy reklamních sítí (Yandex Advertising Network, Google adsense), tlačítka sociálních médií a tak dále.

Rychlost načítání webových stránek je jedním z hodnotících faktorů v Google.

Asynchronní připojení JavaScript zkracuje dobu načítání stránky eliminací latence. Spolu s tím doporučuji komprimovat a sloučit js soubory do jednoho, například pomocí . Uživatelé mají rádi rychlé weby 😎

Zásuvné skripty (JavaScript) blokují načítání kódu HTML. Když prohlížeč (analyzátor) dosáhne značky