Tekst javascript async src učitan. Asinhrono učitavanje JavaScript -a - ubrzava učitavanje stranice. Dodavanje odgođenih ili asinkronih atributa u WordPress
29.06.2020
Zdravo prijatelji! Jeste li znali da je učitavanje JavaScripta jedno od najvećih uskih grla u performansama web stranice? Danas je moj 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 kašnjenja ovisi o nekoliko faktora:
konfiguracija,
brzina internetske veze,
veličina datoteke i ostalo ...
Iz tog razloga Google PageSpeed Insights preporučuje da uklonite JavaScript koji blokira prikaz s vrha stranice. Dobra je praksa postaviti skripte na dno web stranice, na primjer, prije završne oznake.
ili postavljanje asinhronog učitavanja.
Ako kôd skripte utječe na prikaz gornjeg dijela web 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 ovom 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 funkcionira asinhroni i odgođeni JavaScript i koja je temeljna razlika između atributa async i defer. Ali prvo, pogledajmo slijed obrade dokumenta s uobičajenom vezom oznake skripte.
< src = "example.js">
Za ilustrativan primjer upotrijebit ću sljedeće konvencije:
Analiza HTML koda je prekinuta 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 da započne učitavanje js datoteka paralelno bez zaustavljanja daljnje obrade stranice. Izvode se nakon potpunog raščlanjivanja Objektnog modela dokumenta (skraćeno DOM), dok preglednik jamči dosljednost na osnovu redoslijeda povezivanja datoteka.
< defer src = "example.js">
Atribut asinhronizacije
Podrška za async atribut pojavila se u HTML5, omogućava pregledniku da paralelno učitava js datoteke i izvršava ih odmah nakon učitavanja, bez čekanja da se obradi ostatak stranice.
< async src = "example.js">
Dijagram sekvence obrade:
Ovo je asinhrono preuzimanje. Atribut se preporučuje za skripte koje ne utič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 faktora rangiranja u Googleu.
Asinhrono 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 lokacije 😎
Async and Defer - JavaScript strategije učitavanja
JavaScript je bitan dio svake moderne web aplikacije, a strategije koje odaberemo za učitavanje izravno utječu na performanse te aplikacije. U ovom ćemo članku pokušati razumjeti važne razlike između svakog pristupa, prednosti i nedostatke zajedno s implikacijama na performanse, te kako optimizirati interakciju stranice i vrijeme učitavanja.
Za demonstraciju ću stvoriti web stranicu koja se sastoji od sljedećih vanjskih ovisnosti. Obratite posebnu pažnju na odgovarajuće veličine datoteka jer je vrijeme preuzimanja datoteka direktno 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 jezgro (glavna datoteka) javascript -a i zavisi od raščlanjivanja 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, nezavisna 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čitaćemo sve oznake skripti u poglavlje našeg HTML -a. Ispod je snimka zaslona analize mrežne kartice stranice chrome, spremne za interakciju s korisnikom.
Pros:
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 file2 i file3 učitane prije file1, redoslijed izvršavanja će biti ispravan.
Minusi:
U ovom scenariju, HTML raščlanjivanje će biti pauzirano sve dok se sve 3 skripte u odjeljku head ne učitaju, raščlane i izvode. Prazan bijeli ekran 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šavanje koda nakon toga. DOMContentLoaded Ovaj događaj se aktivira kada je izvorni HTML dokument potpuno učitan i raščlanjen bez čekanja da se stilovi i slike završe s učitavanjem.
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.
Pros: HTML se raščlanjuje prije učitavanja skripti, tako da ć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 redoslijed izvođenja skripte.
Minusi:
Nema povećanja performansi kao takvog.
Pristup-3 [pomoću atributa Async]
HTML5 je uveo atribut async script, koji pomaže pri 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, i referencirat će DOM element 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.
Pros: Budući da su skripte učitane u drugu nit, HTML raščlanjivanje neće biti pauzirano i korisnik će moći vidjeti trenutni sadržaj umjesto bijelog praznog ekrana. Glavni dobitak u performansama, odnosno DOMContentLoaded vrijeme se smanjio sa 47,68 sekundi na samo 21,12 sekundi i iznosi ~ 55% povećanja.
Minusi:
JS izvršni 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 će se dogoditi ako se JS učita prije nego što je DOM element dostupan? Doći će do greške.
Napomena: Postavljanje skripti sa async atributom na dno odeljka tijela bilo bi beskorisno i ekvivalentno pristupu-2.
Pristup-4 [pomoću atributa Odgodi]
Atribut Defer će uzrokovati 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.
Pros:
Sačuvan je redoslijed 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 je podržan 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 biblioteke trećih strana koje zavise od Google Analytics, Google reCAPTCHA ili bilo čega drugog što ne zahtijeva DOM pristup, jer se odgovarajuće skripte učitavaju paralelno, ali se odmah izvršavaju .
Koristite 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 lokacijama 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 lokaciju ili pomoći u programiranju weba.
Skripte za dodatke (JavaScript) blokiraju učitavanje HTML koda. Kada pretraživač (parser) dođe do oznake
I sljedeći primjeri pokazuju kako staviti (inline) skriptu unutar
Rezervni modul
Preglednici koji podržavaju vrijednost modula za atribut type zanemaruju bilo koju skriptu s atributom nomodule. To vam omogućava da koristite skripte modula, a istovremeno pružate rezervne skripte bez oznaka modula za nepodržane preglednike.
Uvriježeno je mišljenje da je nemoguće zaraditi novac na internetu bez vlastite web stranice ili ulaganja osobnih sredstava. Ovo nije istina. Ima tona ...
Varajte prijatelje na VKontakteu besplatno
Kako zaista zaraditi na internetu bez ulaganja za početnike Pravi načini da zaradite na internetu bez ulaganja
Čimbenici ponašanja u promicanju i metode rada za njihovo poboljšanje
Kako saznati i povećati promet na stranici VKontakte
Primjena brzog punjenja na Honor telefonu