V najstarších verziách IE (6 a nižšie) bohužiaľ nefunguje asynchrónne načítavanie, ale takíto používatelia už prakticky neexistujú. Všetky ostatné prehliadače a služby úspešne využívajú moderné rýchle sťahovanie internetové stránky.

Async and Defer – stratégie načítania JavaScriptu

JavaScript je neoddeliteľnou súčasťou každej modernej webovej aplikácie a stratégie, ktoré sa rozhodneme použiť na načítanie, priamo ovplyvňujú výkon tejto aplikácie. V tomto článku sa pokúsime pochopiť dôležité rozdiely medzi jednotlivými prístupmi, plusy a mínusy spolu s dôsledkami na výkon a ako optimalizovať interakciu so stránkou a čas načítania.

Na ukážku vytvorím webovú stránku pozostávajúcu z nasledujúcich externých závislostí. Venujte zvláštnu pozornosť príslušným veľkostiam súborov, pretože čas sťahovania súborov je tomu priamo úmerný.

• HTML - stránka ~ 1 MB. Obsahuje skutočné označenie/obsah na zobrazenie dynamického výstupu z JavaScriptu.
• Obrázok - image1.png ~ 5 Mb
• JavaScript - file1.JS ~3MB je jadro (hlavný súbor) javascriptu a závisí od analýzy HTML. Je potrebný na zobrazenie nejakého dynamického obsahu alebo na pripevnenie reakčného/uhlového komponentu na stránku.
• JavaScript - file2.js ~460B - Malý, nezávislý súbor javascript, ktorý interaguje s domom.
• JavaScript – file3.js ~ 1,5 MB je sekundárny súbor js a závisí od súboru 1.js, aby mohol spustiť nejaký kód s nižšou prioritou. Tento kód nie je okamžite potrebný na vykresľovanie stránky a interakciu používateľa; zobrazuje ikony sociálne siete, komentáre, online pomoc, spúšťanie niektorých analytických úloh atď.

Prístup 1 [skripty v hlavnej časti]

V prvom prípade načítame všetky značky skriptov do sekcie head nášho HTML. Nižšie je snímka obrazovky analýzy sieťovej karty chrómované stránky, aby ste boli pripravení na interakciu používateľa.

Výhody:

Poradie spustenia kódu rôznych súborov JS sa zachová v poradí, v akom boli súbory zahrnuté v HTML. V aktuálnom príklade, aj keby sa súbor2 a súbor3 načítali pred súborom1, príkaz na vykonanie by bol správny.

mínusy:

V tomto scenári sa analýza HTML pozastaví, kým sa nenačítajú, analyzujú a nespustia všetky 3 skripty v sekcii head. Prázdny Biela obrazovka sa zobrazí používateľovi, aj keď bol súbor HTML už načítaný [ale nebol analyzovaný]. To rozhodne nie je dobré pre použiteľnosť.

Žiadny z vyššie uvedených skriptov nebude môcť pristupovať a manipulovať s HTML stránkou, pretože DOM ešte nie je pripravený. Jeden z možné riešenia Spôsob, ako vyriešiť tento problém, je počúvať udalosť DOMContentLoaded a potom spustiť kód. Udalosť DOMContentLoaded sa spustí po úplnom načítaní a analýze pôvodného dokumentu HTML bez čakania na dokončenie načítania šablón so štýlmi, obrázkov alebo obrázkov.

Prístup 2 [skript na konci]

Aby sme prekonali 2 problémy, ktorým čelíme pri prvom prístupe, načítajme všetky 3 skripty do spodnej časti značky body.

Výhody: Kód HTML sa analyzuje pred načítaním skriptov, takže používateľ bude môcť okamžite vidieť skutočný obsah namiesto toho, aby musel čakať na skripty.

Keďže všetky skripty sú spustené po analýze HTML, všetky môžu pristupovať k DOM pre akúkoľvek manipuláciu. Postupnosť vykonávania skriptu je zachovaná.

mínusy:

Samo o sebe nedochádza k žiadnemu zvýšeniu výkonu.

Prístup 3 [pomocou atribútu Async]

HTML5 zaviedlo atribút async script, ktorý pomáha pri paralelnom načítavaní príslušných súborov skriptov do iného vlákna bez ovplyvnenia analýzy HTML.

Zodpovedajúci skript však bude analyzovaný a vykonaný hneď po dokončení načítania, bez ohľadu na to, či je analýza HTML dokončená alebo nie, a bude mať odkaz na prvok DOM až do tohto konkrétneho bodu.

Tu môžete jasne vidieť, že súbor2.js bol načítaný predtým HTML súbor. Kým však prehliadač sťahoval súbor2, nepozastavil analýzu HTML, a preto v čase, keď bola vykonaná, mal odkaz na zástupný znak html na vloženie dynamického obsahu.

Výhody: Keďže skripty sú načítané v inom vlákne, analýza HTML nebude pozastavená a používateľ bude môcť vidieť skutočný obsah namiesto bielej prázdnej obrazovky. Hlavné zvýšenie výkonu, t. j. čas DOMContentLoaded sa znížil zo 47,68 sekundy na iba 21,12 sekundy a predstavuje nárast ~55 %.

mínusy:

Sekvencia vykonávania JS nie je zachovaná. Vykonáva sa v príslušnom poradí načítania, nie ako sekvencia skriptov zahrnutá v HTML. Podpora prehliadača – nie je podporovaná v starších webových prehliadačoch, t. j. IE 9 a nižších.

Čo sa stane, ak sa JS načíta skôr, ako bude k dispozícii prvok DOM? Vyvolá sa chyba.

Poznámka: umiestnenie skriptov s atribútom async na spodok časti tela by bolo zbytočné a ekvivalentné prístupu-2.

Prístup 4 [pomocou atribútu Odložiť]

Atribút odložiť spôsobí, že skript sa vykoná až po dokončení analýzy HTML. Jeden veľmi dôležitý bod Tu je potrebné zvážiť, že Chrome zatiaľ nepodporuje odklad a nemá žiadny vplyv na trvanie DOMContentLoaded. Na konci analýzy HTML však vykoná skripty.

Výhody:

Postupnosť importu skriptu je zachovaná. Súbor 3.js sa teda spustí až po dokončení sťahovania a spustení súboru 1, aj keď bol súbor 3 načítaný skôr.

Podpora prehliadača - má najlepšia podpora prehliadačov v porovnaní s atribútom async, teda čiastočne podporovaný v IE v6-9

Skripty môžu pristupovať k modelu DOM, pretože sa spustí až po analýze úplného kódu HTML.

mínusy:

Pôvodne som si myslel, že meškanie bude najlepšia voľba než async, ale neskôr zistil, že Chrome to zatiaľ nepodporuje [verzia 71.0.3578.98] a nemá žiadny vplyv na trvanie DOMContentLoaded.

Vo Firefoxe však funguje podľa očakávania s výraznými vylepšeniami výkonu.

závery

Pre knižnice tretích strán, ktoré závisia od Google Analytics, Google reCAPTCHA alebo čokoľvek iné, čo nevyžaduje prístup DOM, pretože zodpovedajúce skripty sa načítavajú paralelne, ale spúšťajú sa okamžite.

Odložiť použite pre všetky ostatné skripty načítané v sekcii head, pretože budú tiež načítané paralelne, ale vykonajú sa až po dokončení analýzy HTML a pripravenosti DOM na prístup/manipuláciu.

Môžete tiež použiť kombináciu poslucháča DOMContentLoaded vo vnútri asynchrónnych skriptov na neskoršie spustenie funkcií. Vaše názory a zistenia prosím zanechajte v komentároch a rád ich s vami prediskutujem.

Autorom tohto materiálu som ja - Jurij Pakholkov. Poskytujem služby v oblasti písania programov v Jave, C++, C# (ako aj poradenstvo k nim) a tvorby webových stránok. Pracujem so stránkami na CMS OpenCart, WordPress, ModX a self-write. Okrem toho pracujem priamo s JavaScriptom, PHP, CSS, HTML - teda viem dopracovať vašu stránku alebo pomôcť s programovaním webu.

Dobrý deň, priatelia! Vedeli ste, že načítanie JavaScriptu je jednou z najväčších prekážok výkonnosti webových stránok? Dnes je mojou hlavnou úlohou vysvetliť, čo je to skript a ako ovplyvňuje rýchlosť a výkon stránky.

Prehliadač, ktorý načíta značku skriptu, zastaví vykresľovanie stránky, kým sa skript nenačíta a nespustí. Stránka je zablokovaná a prehliadač niekoľko sekúnd nereaguje na akcie používateľa. Čas oneskorenia závisí od niekoľkých faktorov:

• konfigurácia,
• rýchlosť internetového pripojenia,
• veľkosť súboru a ďalšie...

Z tohto dôvodu analyzátor rýchlosti webu Google PageSpeed ​​​​Insights odporúča odstrániť blokujúci JavaScript z hornej časti stránky. Je dobrým zvykom umiestňovať skripty na spodok stránky, napríklad pred uzatváraciu značku alebo nastavenie asynchrónneho načítania.

Ak kód skriptu ovplyvňuje zobrazenie hornej časti stránky, nevyberajte ho do samostatného súboru, ale vložte ho priamo do HTML.

JS môže zmeniť obsah stránky a dokonca presmerovať na inú URL. V tomto prípade zahrnutie skriptu na koniec dokumentu spôsobí „trhnutie“ stránky načítaním nových alebo zmenou existujúcich prvkov v hornej časti.

Použitie atribútov async a defer na značku skriptu

Poďme pochopiť, čo je asynchrónne a odložené JavaScript práca a aký je zásadný rozdiel medzi atribútmi async a defer. Najprv však zvážte postupnosť spracovania dokumentov, kedy normálne pripojenie skriptová značka.

AT dobrý príklad použijem nasledovné dohovorov:

- spracovanie stránky
- načítanie skriptu
- vykonávanie skriptu

Postupnosť spracovania je teda nasledovná:

Parsovanie kódu HTML sa preruší počas načítavania a vykonávania skriptu, po ktorom pokračuje. Pri zobrazovaní webovej stránky došlo k oneskoreniu.

atribút odložiť

Atribút odložiť umožňuje prehliadaču spustiť paralelné načítanie súborov js bez zastavenia ďalšieho spracovania stránky. K ich vykonaniu dôjde po kompletnej analýze objektový model dokument (z anglického Document Object Model, skrátene DOM), pričom prehliadač garantuje konzistenciu na základe poradia spájania súborov.

async atribút

Podpora atribútu async bola zavedená v HTML5, umožňuje prehliadaču načítať súbory js paralelne a spustiť ich ihneď po načítaní, bez čakania na spracovanie zvyšku stránky.

Schéma poradia spracovania:

Toto je asynchrónne sťahovanie. Tento atribút sa odporúča pre skripty, ktoré výrazne neovplyvňujú zobrazenie dokumentu. Patria sem počítadlá zberu štatistík (Google Analytics, Yandex Metrica), kódy reklamnej siete (Yandex Advertising Network, Google adsense), tlačidlá sociálnych médií a podobne.

Rýchlosť načítania webových stránok je jedným z hodnotiacich faktorov v Google.

Asynchrónne pripojenie JavaScript skracuje časy načítania stránky odstránením latencie. Spolu s tým odporúčam komprimovať a zlúčiť súbory js do jedného, ​​napríklad pomocou súboru . Používatelia majú radi rýchle weby 😎

Zásuvné skripty (JavaScript) blokujú načítanie kódu HTML. Keď prehliadač (analyzátor) dosiahne značku