Text javascript async src načítaný. Asynchrónne načítanie JavaScriptu – zrýchlenie načítania stránky. Pridanie atribútov odložiť alebo async vo WordPress
29.06.2020
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č načítajúci značku skriptu prestane vykresľovať stránku, 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 iné...
Z tohto dôvodu Google PageSpeed Insights odporúča odstrániť JavaScript z hornej časti stránky, ktorý blokuje zobrazenie. 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, nevkladajte 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ú adresu URL. V tomto prípade zahrnutie skriptu na koniec dokumentu povedie k efektu „šklbania“ stránky, načítavania nových alebo zmeny existujúcich prvkov v hornej časti.
Použitie atribútov async a defer na značku skriptu
Poďme sa pozrieť na to, čo je asynchrónna a odložená práca JavaScriptu a aký je zásadný rozdiel medzi atribútmi async a defer. Najprv sa však pozrime na postupnosť spracovania dokumentu s obvyklým pripojením značky skriptu.
< src = "example.js">
Pre názorný príklad použijem nasledujúce konvencie:
- spracovanie stránky - načítanie skriptu - vykonávanie skriptu
Postupnosť spracovania je teda nasledovná:
Analýza kódu HTML sa preruší počas načítavania a vykonávania skriptu a potom pokračuje. Pri zobrazovaní webovej stránky došlo k oneskoreniu.
Odložiť atribút
Atribút odložiť umožňuje prehliadaču spustiť paralelné načítanie súborov js bez zastavenia ďalšieho spracovania stránky. Spúšťajú sa po úplnom rozbore modelu objektu dokumentu (skrátene DOM), pričom prehliadač zaručuje konzistenciu na základe poradia, v ktorom sú súbory pripojené.
< defer src = "example.js">
Async atribút
Podpora atribútu async sa objavila 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.
< async src = "example.js">
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á zhromažďovania štatistík (Google Analytics, Yandex Metrica), kódy reklamných sietí (Reklamná sieť Yandex, Google AdSense), tlačidlá sociálnych médií atď.
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ť js súbory do jedného, napríklad pomocou knižnice. Používatelia milujú rýchle stránky 😎
Async and Defer – stratégie načítania JavaScriptu
JavaScript je nevyhnutnou 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, výhody a nevýhody spolu s dôsledkami na výkon a ako optimalizovať interakciu so stránkou a časy načítania.
Pre 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 časy sťahovania súborov sú 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 ~ 3 MB je jadro (hlavný súbor) javascript a závisí od analýzy HTML. Je potrebné zobraziť nejaký dynamický obsah alebo na stránku namontovať reakčný / uhlový komponent.
JavaScript - file2.js ~ 460B je 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 sa nevyžaduje okamžite na vykresľovanie stránky a interakciu používateľa; zobrazuje ikony sociálnych médií, komentáre, online pomoc, spúšťanie niektorých analytických úloh atď.
Teraz je čas analyzovať rôzne prístupy
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 karty siete na stránke Chrome, ktorá je pripravená na interakciu používateľa.
Výhody:
Postupnosť vykonávania kódu rôznych súborov JS sa uloží v poradí, v akom boli súbory zahrnuté v HTML. V aktuálnom príklade, aj keď boli súbor2 a súbor3 načítané pred súborom1, poradie vykonávania bude správne.
mínusy:
V tomto scenári bude analýza HTML pozastavená, kým sa nenačítajú, analyzujú a nespustia všetky 3 skripty v sekcii head. Používateľovi sa zobrazí prázdna biela obrazovka, aj keď už bol súbor HTML načítaný [ale neanalyzovaný]. 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ý. Jedným z možných riešení na zvládnutie tohto problému je počúvať udalosť DOMContentLoaded a potom spustiť kód. DOMContentLoaded Táto udalosť sa spustí, keď sa pôvodný dokument HTML úplne načíta a analyzuje bez čakania na dokončenie načítania šablón so štýlmi, 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: HTML sa analyzuje pred načítaním skriptov, takže používateľ bude môcť okamžite vidieť skutočný obsah namiesto čakania 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:
Neexistuje žiadny nárast výkonu ako taký.
Prístup 3 [pomocou atribútu Async]
HTML5 zaviedlo atribút async script, ktorý pomáha pri načítavaní vhodných súborov skriptov paralelne s iným streamom bez ovplyvnenia analýzy HTML.
Zodpovedajúci skript sa však analyzuje a spustí hneď po dokončení načítania, či už je analýza HTML dokončená alebo nie, a bude odkazovať na prvok DOM až do tohto špecifického bodu.
Tu môžete jasne vidieť, že súbor2.js bol načítaný pred súborom HTML. Kým však prehliadač načítal súbor 2, 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ť okamžitý 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 ~ 55 % zisku.
mínusy:
Sekvencia vykonávania JS nie je zachovaná. Vykoná sa v správnom poradí načítania, nie podľa sekvencie skriptov zahrnutej v HTML. Podpora prehliadača – nie je podporovaná v starších webových prehliadačoch, napr. 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: Umiestňovanie 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 Defer spôsobí, že skript sa vykoná až po dokončení analýzy HTML. Jeden veľmi dôležitý bod, ktorý treba mať na pamäti, je, že Chrome zatiaľ nepodporuje odklad a nemá žiadny vplyv na trvanie DOMContentLoaded. Spúšťa však skripty na konci analýzy HTML.
Výhody:
Postupnosť importovania skriptov 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á lepšiu podporu prehliadača v porovnaní s atribútom async, t.j. č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 odklad bude lepšou voľbou ako async, ale neskôr som zistil, že Chrome ho 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 čohokoľvek iného, čo nevyžaduje prístup DOM, je vhodnejšie umiestniť značky skriptu do sekcie head s atribútom async, 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 sa tiež načítajú paralelne, ale vykonajú sa až po dokončení analýzy HTML a pripravenosti na prístup / manipuláciu s DOM.
Môžete tiež použiť kombináciu poslucháča DOMContentLoaded v asynchrónnych skriptoch na neskoršie spustenie funkcií. Svoje názory a závery prosím zanechajte v komentároch, 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 upraviť vašu stránku alebo pomôcť s programovaním webu.
Plug-in skripty (JavaScript) blokujú načítanie HTML kódu. Keď prehliadač (analyzátor) dosiahne značku
