Tekst javascript async src on laaditud. Asünkroonne JavaScripti laadimine - kiirendage lehe laadimist. Edasilükkamise või asünkroonimise atribuutide lisamine WordPressis
29.06.2020
Tere, sõbrad! Kas teadsite, et JavaScripti laadimine on veebisaidi jõudluse üks suurimaid kitsaskohti? Täna on minu peamine ülesanne selgitada, mis on skript ja kuidas see mõjutab saidi kiirust ja jõudlust.
Skriptisildi laadiv brauser lõpetab lehe renderdamise, kuni skript on laaditud ja käivitatud. Leht on blokeeritud ja brauser ei reageeri kasutaja toimingutele paar sekundit. Viivitusaeg sõltub mitmest tegurist:
konfiguratsioon,
Interneti -ühenduse kiirus,
faili suurus ja muud ...
Sel põhjusel soovitab Google PageSpeed Insights eemaldada JavaScripti lehe ülaosast, mis blokeerib kuvamise. Hea tava on paigutada skriptid saidi lõppu, näiteks enne lõpumärgendit.
või asünkroonse laadimise seadistamine.
Kui skripti kood mõjutab saidi ülemise osa kuvamist, ärge pange seda eraldi faili, vaid manustage see otse HTML -i.
JS saab muuta saidi sisu ja isegi suunata teisele URL -ile. Sellisel juhul toob dokumendi lõpus skripti ühendamine kaasa lehe "tõmblemise", ülaosas uute laadimise või olemasolevate elementide muutmise efekti.
Asünkrooni ja edasilükkamise atribuutide rakendamine skriptisildile
Vaatame, mis on asünkroonne ja edasilükatud JavaScripti töö ning milline on põhimõtteline erinevus asünkrooni ja edasilükkamise atribuutide vahel. Kuid kõigepealt vaatame dokumentide töötlemise järjestust skriptisildi tavalise ühendamisega.
< src = "example.js">
Illustreeriva näite jaoks kasutan järgmisi tavasid:
Skripti laadimise ja käivitamise ajal katkestatakse HTML -koodi sõelumine ning see jätkub. Veebilehe kuvamine viibib.
Atribuudi edasilükkamine
Atribuut edasilükkamine võimaldab brauseril alustada paralleelselt js -failide laadimist, peatamata lehe edasist töötlemist. Need käivitatakse pärast dokumendiobjektimudeli täielikku sõelumist (lühidalt DOM), samas kui brauser tagab järjepidevuse failide ühendamise järjekorra alusel.
< edasi lükata src = "example.js">
Asünkraatori atribuut
HTML5 -s ilmus tugi atribuudile async, see võimaldab brauseril paralleelselt js -faile laadida ja kohe pärast laadimist käivitada, ootamata ülejäänud lehe töötlemist.
< async src = "example.js">
Töötlemisjärjestuse skeem:
See on asünkroonne allalaadimine. Atribuuti soovitatakse skriptidele, mis ei mõjuta oluliselt dokumendi kuvamist. Nende hulka kuuluvad statistika kogumise loendurid (Google Analytics, Yandex Metrica), reklaamivõrgustiku koodid (Yandexi reklaamivõrk, Google Adsense), sotsiaalmeedia nupud jne.
Veebisaidi laadimiskiirus on Google'is üks paremusjärjestusest.
Asünkroonne JavaScriptiühendus vähendab lehe laadimisaega, kõrvaldades latentsuse. Koos sellega soovitan tihendada ja ühendada js -failid üheks, näiteks kasutades raamatukogu. Kasutajatele meeldivad kiired saidid 😎
Async ja Defer - JavaScripti laadimisstrateegiad
JavaScript on iga kaasaegse veebirakenduse oluline osa ja meie valitud laadimisstrateegiad mõjutavad otseselt selle rakenduse toimivust. Selles artiklis proovime mõista olulisi erinevusi iga lähenemisviisi vahel, plusse ja miinuseid koos mõjuga toimivusele ning kuidas optimeerida lehe interaktsiooni ja laadimisaega.
Demonstreerimiseks loon veebisaidi, mis koosneb järgmistest välistest sõltuvustest. Pöörake erilist tähelepanu vastavatele failisuurustele, kuna failide allalaadimisajad on sellega otseselt proportsionaalsed.
HTML - leht ~ 1 MB. Sisaldab tegelikku märgistust / sisu, et näidata JavaScripti dünaamilist väljundit.
Pilt - image1.png ~ 5 Mb
JavaScript - file1.JS ~ 3MB on tuum (põhifail) javascript ja sõltub HTML -i parsimisest. See on vajalik mõne dünaamilise sisu näitamiseks või reageeriva / nurga komponendi paigaldamiseks lehele.
JavaScript - file2.js ~ 460B on väike, sõltumatu javascripti fail, mis suhtleb domeeniga.
JavaScript - file3.js ~ 1,5 MB on sekundaarne js -fail ja sõltub fail1.js -st mõne madalama prioriteediga koodi käivitamisest. Seda koodi ei nõuta kohe lehe renderdamiseks ja kasutajaga suhtlemiseks; see näitab sotsiaalmeedia ikoone, kommentaare, veebiabi, mõne analüüsiülesande käivitamist jne.
Nüüd on aeg analüüsida erinevaid lähenemisviise
1. lähenemisviis [skriptid päiseosas]
Esimesel juhul laadime kõik skriptide sildid meie HTML -i päisesse. Allpool on ekraanipilt Chrome'i lehe võrgukaardi analüüsist, mis on kasutajate jaoks valmis.
Plussid:
Erinevate JS -failide koodi täitmise järjestus salvestatakse failide HTML -i lisamise järjekorras. Praeguses näites, isegi kui fail2 ja fail3 laaditi enne faili1, on täitmise järjekord õige.
Miinused:
Selle stsenaariumi korral peatatakse HTML -i parsimine seni, kuni kõik 3 skripti päises on laaditud, sõelutud ja käivitatud. Tühi valge ekraan kuvatakse kasutajale isegi siis, kui HTML -fail on juba laaditud [kuid mitte parsitud]. See ei ole kindlasti kasutatavuse jaoks hea.
Ükski ülaltoodud skriptidest ei saa HTML -lehele juurde pääseda / seda manipuleerida, kuna DOM pole veel valmis. Üks võimalik lahendus selle probleemi lahendamiseks on kuulata sündmust DOMContentLoaded ja seejärel kood käivitada. DOMContentLoaded See sündmus käivitatakse, kui algne HTML -dokument on täielikult laaditud ja sõelutud, ootamata laadilehtede ja piltide laadimise lõpetamist.
2. lähenemine [skriptid lõpus]
Esimese lähenemisviisiga silmitsi seisvate kahe probleemi lahendamiseks laadime kõik kolm skripti keha märgendi alaossa.
Plussid: HTML analüüsitakse enne skriptide laadimist, nii et kasutaja näeb skripte ootamise asemel kohe tegelikku sisu.
Kuna kõik skriptid käivitatakse pärast HTML -i sõelumist, on neil kõigil juurdepääs DOM -ile igasuguste manipulatsioonide jaoks. Skripti täitmise jada säilitatakse.
Miinused:
Tulemuslikkust kui sellist ei ole.
3. lähenemisviis [kasutades Asynci atribuuti]
HTML5 tutvustas asünkroonse skripti atribuuti, mis aitab laadida sobivaid skriptifaile paralleelselt teise voogu ilma HTML -i parsimist mõjutamata.
Vastavat skripti sõelutakse ja käivitatakse aga kohe, kui see on laadimine lõpule jõudnud, olenemata sellest, kas HTML -i sõelumine on lõpule viidud või mitte, ja viitab DOM -elemendile selle konkreetse punktini.
Siin näete selgelt, et fail2.js laaditi enne HTML -faili. Kuigi brauser laadis faili2, ei peatanud see HTML -i sõelumist ja seetõttu oli selle täitmise ajaks link dünaamilise sisu sisestamiseks html -kohatäite juurde.
Plussid: Kuna skriptid laaditakse teise lõime, ei peata HTML -i sõelumist ja kasutaja näeb valge tühja ekraani asemel vahetu sisu. Peamine jõudluse kasv, st DOMContentLoaded aeg on vähenenud 47,68 sekundilt vaid 21,12 sekundile ja moodustab ~ 55% võimendusest.
Miinused:
JS -i täitmisjärjestust ei säilitata. See käivitatakse õiges laadimisjärjestuses, mitte HTML -i lisatud skriptide jada. Brauseri tugi - ei toeta vanemad veebibrauserid, st IE 9 ja vanemad.
Mis juhtub, kui JS laaditakse enne, kui DOM -element on saadaval? Viga ilmneb.
Märkus. Asünkroonse atribuudiga skriptide paigutamine kehaosa alaossa oleks kasutu ja samaväärne lähenemisega 2.
4. lähenemisviis [atribuudi Defer kasutamine]
Atribuut Edasi lükata põhjustab skripti käivitamise alles pärast HTML -i sõelumise lõpetamist. Siinkohal tuleb meeles pidada üht väga olulist punkti, et Chrome ei toeta veel edasilükkamist ega mõjuta DOMContentLoaded kestust. Siiski täidab see skripte HTML -i sõelumise lõpus.
Plussid:
Skriptide importimise järjestus säilib. Seega käivitatakse fail3.js alles pärast allalaadimise lõpuleviimist ja faili1 täitmist, isegi kui fail3 laaditi varem.
Brauseri tugi - sellel on parem brauseri tugi võrreldes atribuudiga async, st seda toetab osaliselt IE v6-9
Skriptidel on juurdepääs DOM -ile, kuna see käivitatakse alles pärast täieliku HTML -i sõelumist.
Miinused:
Algselt arvasin, et edasilükkamine on parem valik kui asünkroonimine, kuid hiljem leidsin, et Chrome ei toeta seda veel [versioon 71.0.3578.98] ega mõjuta DOMContentLoaded kestust.
Kuid see töötab Firefoxis ootuspäraselt, parandades märkimisväärselt jõudlust.
järeldused
Kolmandate osapoolte teekide jaoks, mis sõltuvad Google Analyticsist, Google reCAPTCHA-st või muust, mis ei vaja DOM-i juurdepääsu, on parem paigutada skriptimärgid päise sektsiooni koos asünkroonse atribuudiga, kuna vastavad skriptid laaditakse paralleelselt, kuid käivitatakse kohe .
Kasutage edasilükkamist kõigi teiste peasektsiooni laaditud skriptide jaoks, kuna need laaditakse samuti paralleelselt, kuid neid käivitatakse alles pärast seda, kui HTML on parsimise lõpetanud ja DOM on juurdepääsuks / manipuleerimiseks valmis.
Funktsioonide hilisemaks täitmiseks saate asünkroonsetes skriptides kasutada ka kuulajate kombinatsiooni DOMContentLoaded. Palun jätke oma arvamused ja järeldused kommentaaridesse ja ma arutan neid hea meelega teiega.
Selle materjali autor on mina - Juri Pakholkov. Pakun teenuseid Java, C ++, C # programmide kirjutamiseks (samuti nendega nõustamiseks) ja veebisaitide loomiseks. Töötan CMS OpenCart, WordPress, ModX ja ise kirjutatud saitidega. Lisaks töötan otse JavaScripti, PHP, CSS, HTML -iga - see tähendab, et saan muuta teie saiti või aidata veebiprogrammeerimisel.
Pistikprogrammid (JavaScript) blokeerivad HTML-koodi laadimise. Kui brauser (parser) jõuab märgendini
Ja järgmised näited näitavad, kuidas (inline) skripti kausta panna
Mooduli tagavara
Brauserid, mis toetavad tüübi atribuudi mooduli väärtust, ignoreerivad kõiki skripte, millel on atribuut nomodule. See võimaldab teil kasutada mooduliskripte, pakkudes samal ajal nomodule -märgistusega varuskripte mittetoetavatele brauseritele.
On levinud arvamus, et ilma oma veebisaidi või isiklikke vahendeid investeerimata on võimatu Internetis raha teenida. See ei ole tõsi. Neid on tonni ...
Petta sõpru VKontakte'is tasuta
Kuidas tõesti teenida Internetis raha ilma investeeringuteta algajatele Tõelised viisid Internetis raha teenimiseks ilma investeeringuteta
Käitumuslikud tegurid edutamisel ja töömeetodid nende parandamiseks
Kuidas teada saada ja suurendada liiklust VKontakte lehele
Kiire laadimise rakendamine Honor -telefonil