Tekst javascript async src učitan. Asinkrono učitavanje JavaScripta - ubrzava učitavanje stranice. Dodavanje atributa odgode ili asinkronizacije u WordPress
29.06.2020
Pozdrav prijatelji! Jeste li znali da je učitavanje JavaScripta jedno od najvećih uskih grla u izvedbi web stranice? Danas mi je glavni zadatak objasniti što je skripta i kako utječe na brzinu i performanse web stranice.
Preglednik koji učitava oznaku skripte prestaje prikazivati stranicu sve dok se skripta ne učita i izvrši. Stranica je blokirana i preglednik ne reagira na radnje korisnika nekoliko sekundi. Vrijeme odgode ovisi o nekoliko čimbenika:
konfiguracija,
brzina internetske veze,
veličina datoteke i ostalo ...
Iz tog razloga Google PageSpeed Insights preporučuje uklanjanje JavaScripta s vrha stranice koji blokira prikaz. Dobra je praksa postaviti skripte na dno web mjesta, na primjer, prije završne oznake.
ili postavljanje asinkronog učitavanja.
Ako kod skripte utječe na prikaz gornjeg dijela stranice, nemojte ga stavljati u zasebnu datoteku, već ga umetnite izravno u HTML.
JS može promijeniti sadržaj web stranice, pa čak i preusmjeriti na drugi url. U tom slučaju, povezivanje skripte na kraju dokumenta dovest će do učinka "trzanja" stranice, učitavanja novih ili mijenjanja postojećih elemenata pri vrhu.
Primjena atributa async i defer na oznaku skripte
Pogledajmo što radi asinkroni i odgođeni JavaScript i koja je temeljna razlika između atributa async i defer. No, prvo, pogledajmo slijed obrade dokumenta s uobičajenom vezom oznake skripte.
< src = "example.js">
Za ilustrativan primjer poslužit ću se sljedećim konvencijama:
Raščlanjivanje HTML koda prekida se dok se skripta učitava i izvršava, a zatim nastavlja. Došlo je do kašnjenja u prikazivanju web stranice.
Atribut odgode
Atribut defer omogućuje pregledniku paralelno učitavanje js datoteka bez zaustavljanja daljnje obrade stranice. Do njihovog izvršavanja dolazi nakon potpunog raščlanjivanja objektnog modela dokumenta (iz engleskog Document Object Model, skraćeno DOM), dok preglednik jamči slijed na temelju redoslijeda povezivanja datoteka.
< odgoditi src = "example.js">
Atribut asinhronizacije
Podrška za async atribut pojavila se u HTML5, dopušta pregledniku paralelno učitavanje js datoteka i izvršavanje odmah nakon učitavanja, bez čekanja da se obradi ostatak stranice.
< async src = "example.js">
Dijagram niza obrade:
Ovo je asinkrono preuzimanje. Atribut se preporučuje za skripte koje ne utječu značajno na prikaz dokumenta. To uključuje brojače prikupljanja statističkih podataka (Google Analytics, Yandex Metrica), kodove oglasne mreže (Yandex Advertising Network, Google Adsense), gumbe na društvenim mrežama itd.
Brzina učitavanja web stranice jedan je od čimbenika rangiranja u Googleu.
Asinkrono JavaScript povezivanje smanjuje vrijeme učitavanja stranice uklanjanjem kašnjenja. Uz ovo, preporučujem komprimiranje i spajanje js datoteka u jednu, na primjer pomoću biblioteke. Korisnici vole brze web stranice 😎
Async and Defer - JavaScript strategije učitavanja
JavaScript je bitan dio svake moderne web aplikacije, a strategije koje odaberemo koristiti za učitavanje izravno utječu na performanse same te aplikacije. U ovom ćemo članku pokušati razumjeti važne razlike između svakog pristupa, prednosti i nedostatke zajedno s implikacijama na izvedbu te kako optimizirati interakciju stranice i vrijeme učitavanja.
Za demonstraciju ću izraditi web stranicu koja se sastoji od sljedećih vanjskih ovisnosti. Obratite posebnu pozornost na odgovarajuće veličine datoteka jer je vrijeme preuzimanja datoteka izravno proporcionalno ovome.
HTML - stranica ~ 1 MB. Sadrži stvarne oznake / sadržaj za prikaz dinamičkog izlaza iz JavaScripta.
Slika - image1.png ~ 5 Mb
JavaScript - file1.JS ~ 3MB je jezgra (glavna datoteka) javascript i ovisi o raščlanjivanju HTML -a. Potrebno je za prikaz nekog dinamičkog sadržaja ili za montiranje reakcijske / kutne komponente na stranicu.
JavaScript - file2.js ~ 460B je mala, neovisna javascript datoteka koja komunicira s domom.
JavaScript - file3.js ~ 1,5 MB je sekundarna js datoteka i ovisi o file1.js za izvršavanje nekog koda nižeg prioriteta. Ovaj kôd nije potreban odmah za iscrtavanje stranica i interakciju korisnika; prikazuje ikone društvenih medija, komentare, online pomoć, pokretanje nekih analitičkih zadataka itd.
Sada je vrijeme za analizu različitih pristupa
Pristup-1 [skripte u odjeljku glave]
U prvom slučaju učitat ćemo sve oznake skripti u odjeljak glave našeg HTML -a. Ispod je snimka zaslona analize mrežne kartice stranice chrome, spremne za interakciju s korisnikom.
Prednosti:
Slijed izvršavanja koda različitih JS datoteka bit će spremljen redoslijedom kojim su datoteke uključene u HTML. U trenutnom primjeru, čak i ako su datoteke2 i datoteke3 učitane prije datoteke1, redoslijed izvođenja bit će točan.
Minusi:
U ovom scenariju, raščlanjivanje HTML -a bit će pauzirano sve dok se sve 3 skripte u odjeljku glave ne učitaju, raščlane i izvode. Prazan bijeli zaslon bit će prikazan korisniku čak i ako je HTML datoteka već učitana [ali nije raščlanjena]. Ovo definitivno nije dobro za upotrebljivost.
Nijedna od gore navedenih skripti neće moći pristupiti / manipulirati HTML stranicom jer DOM još nije spreman. Jedno od mogućih rješenja za rješavanje ovog problema je osluškivanje događaja DOMContentLoaded, a zatim izvršenje koda. DOMContentLoaded Ovaj događaj pokreće se kad je izvorni HTML dokument potpuno učitan i raščlanjen bez čekanja da se stilovi, slike dovrše.
Pristup-2 [skripte na kraju]
Da bismo prevladali 2 problema s kojima se susrećemo u prvom pristupu, učitajmo sve 3 skripte na dnu oznake tijela.
Prednosti: HTML se raščlanjuje prije učitavanja skripti, pa će korisnik moći vidjeti stvarni sadržaj odmah, umjesto da čeka skripte.
Budući da se sve skripte izvršavaju nakon raščlanjivanja HTML -a, svi mogu pristupiti DOM -u za bilo koju vrstu manipulacije. Sačuvan je slijed izvođenja skripte.
Minusi:
Nema povećanja performansi kao takvog.
Pristup-3 [pomoću atributa Async]
HTML5 je uveo atribut async skripte, koji pomaže u paralelnom učitavanju odgovarajućih datoteka skripti na drugi tok bez utjecaja na raščlanjivanje HTML -a.
Međutim, odgovarajuća skripta će se raščlaniti i izvršiti čim dovrši učitavanje, bez obzira na to je li raščlanjivanje HTML -a dovršeno ili ne, te će upućivati na element DOM do te određene točke.
Ovdje možete jasno vidjeti da je file2.js učitan prije HTML datoteke. Međutim, dok je preglednik učitavao datoteku2, nije pauzirao raščlanjivanje HTML -a i zbog toga je do trenutka izvođenja imao vezu do html čuvara mjesta za ubacivanje dinamičkog sadržaja.
Prednosti: Budući da su skripte učitane u drugu nit, HTML raščlanjivanje neće biti pauzirano i korisnik će moći vidjeti neposredni sadržaj umjesto bijelog praznog zaslona. Glavni dobitak, tj. DOMContentLoaded vrijeme smanjeno je sa 47,68 sekundi na samo 21,12 sekundi i iznosi ~ 55% dobitka.
Minusi:
JS izvedbeni slijed nije sačuvan. Izvodi se pravilnim redoslijedom učitavanja, a ne uključenim nizom skripti u HTML -u. Podrška za preglednike - Nije podržano na starijim web preglednicima, tj. IE 9 i starijim.
Što se događa ako se JS učita prije nego što je DOM element dostupan? Doći će do pogreške.
Napomena: Postavljanje skripti s async atributom na dno dijela teksta bilo bi beskorisno i ekvivalentno Pristupu-2.
Pristup-4 [pomoću atributa Odgodi]
Atribut Odgodi uzrokovat će izvršavanje skripte tek nakon što je HTML raščlanjivanje dovršeno. Ovdje morate imati na umu jednu vrlo važnu točku da Chrome još ne podržava odgodu i nema utjecaja na trajanje DOMContentLoaded. Međutim, izvršava skripte na kraju raščlanjivanja HTML -a.
Prednosti:
Sačuvan je slijed uvoza skripti. Dakle, file3.js se izvršava tek nakon dovršetka preuzimanja i izvođenja datoteke1, čak i ako je datoteka3 učitana ranije.
Podrška za preglednik - ima bolju podršku za preglednik u odnosu na async atribut, tj. Djelomično podržano u IE v6-9
Skripte mogu pristupiti DOM -u jer se izvršava tek nakon što je raščlanjen cijeli HTML.
Minusi:
Prvotno sam mislio da bi odgađanje bilo bolji izbor od async -a, ali kasnije sam otkrio da ga Chrome još ne podržava [verzija 71.0.3578.98] i nema utjecaja na trajanje DOMContentLoaded -a.
Međutim, radi kako se očekuje u Firefoxu sa značajnim poboljšanjima performansi.
zaključci
Poželjno je postaviti oznake skripte u odjeljak glave s atributom async za knjižnice trećih strana koje ovise o Google Analyticsu, Googleu reCAPTCHA ili bilo čemu drugom što ne zahtijeva DOM pristup, budući da se odgovarajuće skripte učitavaju paralelno, ali se odmah izvršavaju .
Upotrijebite odgodu za sve ostale skripte učitane u odjeljak glave jer će se također učitavati paralelno, ali će se izvršiti tek nakon što HTML završi raščlanjivanje i DOM je spreman za pristup / manipulaciju.
Također možete koristiti kombinaciju slušatelja DOMContentLoaded unutar asinkronih skripti za kasnije izvršavanje funkcionalnosti. Ostavite svoja mišljenja i zaključke u komentarima, a ja ću ih rado raspraviti s vama.
Autor ovog materijala sam ja - Yuri Pakholkov. Pružam usluge za pisanje programa na Javi, C ++, C # (kao i savjetovanje o njima) i izradu web stranica. Radim sa web stranicama na CMS-u OpenCart, WordPress, ModX i samostalno. Osim toga, radim izravno s JavaScriptom, PHP -om, CSS -om, HTML -om - odnosno, mogu izmijeniti vašu web stranicu ili pomoći u programiranju weba.
Skripte za dodatke (JavaScript) blokiraju učitavanje HTML koda. Kad preglednik (parser) dosegne oznaku
