Ekziston një rrugëdalje: vendosni linjat Javascript në fund të dokumentit html (prandaj, ato do të ngarkohen pasi të vizatohet e gjithë faqja) dhe vetëm pas kësaj përmbajtja e blloqeve do të shfaqet në vendet e duhura. Quhet . Të gjitha projektet serioze sot po përpiqen të kalojnë në teknologjinë e re të ngarkimit sa më shpejt që të jetë e mundur. Për më tepër, është absolutisht e lehtë.
Ka disa qasje. Do të filloj me radhë.
script src= type= "tekst/javascript" >
Ngarkimi asinkron i skriptit HTML5Standardi HTML5 mbështet aftësinë për të ngarkuar skriptet në mënyrë asinkrone, gjë që mund të shpejtojë ndjeshëm kohën e përgjithshme të rikthimit të faqeve. Thjesht shtoni asinkronizim ose shtyjeni.
< script async src= "http://www.site.ru/script.js" type= "text/javascript" >
< script defer src= "http://www.site.ru/script.js" type= "text/javascript" >
Cili është ndryshimi midis atributeve async dhe defer?
Në të dyja rastet marrim ngarkim asinkron të skripteve. I vetmi ndryshim është momenti kur skripti fillon të ekzekutohet. Një skript me atributin async do të ekzekutohet sa më shpejt që të jetë e mundur pasi të jetë ngarkuar plotësisht, por përpara se të ngarkohet objekti i dritares. Nëse përdoret atributi defer, skripti nuk do të shkelë rendin e ekzekutimit të tij në lidhje me skriptet e tjera dhe ekzekutimi i tij do të ndodhë pasi faqja të jetë ngarkuar dhe analizuar plotësisht, por përpara ngjarjes DOMContentLoaded të objektit të dokumentit.
Fatkeqësisht, ky mekanizëm nuk funksionon aktualisht në të gjithë shfletuesit (veçanërisht IE). Gjithashtu nuk do të funksionojë nëse ka linja document.write në skedarin script.js.
Ngarkimi asinkron i javascript me skriptin GoogleSiç e dinë të gjithë ekspertët, Google i kushton vëmendje të veçantë shpejtësisë së ngarkimit të faqeve dhe ul shpejtësinë e ngadaltë në rezultatet e kërkimit. Për të ndihmuar, Google ka zhvilluar një skript të veçantë me të cilin mund të bëni ngarkim asinkron të javascript.
Për ta përdorur, thjesht zëvendësoni
në
Dhe lidhni skedarin e skriptit extsrc.js
Do të dalë kështu:
< script src= "http://extsrcjs.googlecode.com/svn/trunk/extsrc.js" > < script extsrc= "...." >
Fatkeqësisht, kjo metodë gjithashtu nuk funksionon për skedarët me document.write
Ngarkimi më i mirë asinkron i Javascript-itNjë metodë universale për të gjithë shfletuesit. Edhe punon me dokument.shkruaj
Në vendin në faqen ku duhet të shfaqim elementin tonë, krijoni një bllok div bosh:
< div id= "script_block" class = "script_block" >
Në fund të faqes, përpara se të fusim një skript për ngarkimin asinkron të skedarëve:
< div id= "script_ad" class = "script_ad" style= "display:none;" >Këtu është çdo skedar ose skript që duhet të ngarkohet.< script type= "text/javascript" >// zhvendoseni atë në dokumentin aktual të pozicionit të ekranit. getElementById("script_block") . appendChild(dokument. getElementById("script_ad") ); // trego dokumentin. getElementById("script_ad") . stil. shfaq = "blloko" ;
Në versionet më të vjetra të IE (6 dhe më poshtë), ngarkimi asinkron për fat të keq nuk funksionon, por praktikisht nuk ka më përdorues të tillë. Të gjithë shfletuesit dhe shërbimet e tjera përdorin me sukses ngarkimin e përshpejtuar modern të faqeve të internetit.
Skriptet sinkrone janë të këqija, ata e detyrojnë shfletuesin të bllokojë ndërtimin e pemës DOM: së pari ju duhet të merrni skriptin, ta ekzekutoni atë dhe vetëm atëherë të vazhdoni të përpunoni pjesën tjetër të faqes. Kjo sigurisht nuk është asgjë e re për ju dhe arsyeja pse ne si ungjilltarë kemi promovuar përdorimin e shkrimit asinkron. Ja një shembull i thjeshtë:
var script = dokument .createElement("script" ); script.src = "http://somehost.com/awesome-widget.js" ; dokumenti .getElementsByTagName("head" ).appendChild(script);Qfare eshte dallimi? Në versionin "i keq", ne bllokojmë ndërtimin e pemës DOM, presim derisa skripti të ngarkohet dhe ekzekutohet, dhe vetëm atëherë vazhdojmë përpunimin e pjesës tjetër të dokumentit. Në shembullin e dytë, ne fillojmë menjëherë të ekzekutojmë një skript që krijon një element skripti që tregon një burim të jashtëm, e shtojmë atë në dokument dhe vazhdojmë përpunimin e DOM. Dallimi është delikat, por shumë i rëndësishëm: skriptet e krijuara në mënyrë dinamike nuk bllokojnë.
Pra, kjo është e mrekullueshme, apo jo? Skriptet e krijuara në mënyrë dinamike janë një gjë! Jo kaq shpejt.
JavaScript inline ka një grackë të vogël, por të rëndësishme (dhe shpesh të anashkaluar): CSSOM e bllokon atë përpara ekzekutimit. Pse? Shfletuesi nuk e di se çfarë po planifikon të bëjë skripti dhe meqenëse JavaScript mund të manipulojë vetitë e CSS, ai bllokon dhe pret ndërsa CSS analizohet dhe CSSOM është ndërtuar. Është më mirë të shohësh një herë sesa të dëgjosh njëqind herë, merrni parasysh shembullin e mëposhtëm:
Prit një sekondë, çfarë po ndodh? Të dy skriptet do të ngarkohen paraprakisht dhe do të ekzekutohen ~ 2,7 sekonda pas ngarkimit të faqes. Vini re se skriptet do të ekzekutohen ende vetëm pasi CSS të jetë i disponueshëm (~2,7 sekonda), por meqenëse skriptet janë ngarkuar tashmë kur CSSOM bëhet i disponueshëm, ne mund t'i ekzekutojmë ato menjëherë, duke kursyer mbi një sekondë kohë përpunimi. A bëmë gjithçka gabim?
Përpara se t'i përgjigjemi kësaj pyetjeje, le të shohim një shembull tjetër, këtë herë me atributin "async":
Nëse atributi asinkron është i pranishëm, skripti do të ekzekutohet në mënyrë asinkrone sapo të jetë i disponueshëm. Nëse atributi mungon, ... atëherë skripti ngarkohet dhe ekzekutohet menjëherë, përpara se të vazhdojë analizimi i mëtejshëm i dokumentit.
Atributi async në etiketën e skriptit zbaton dy veti të rëndësishme: i thotë shfletuesit të mos bllokojë ndërtimin e DOM dhe të mos bllokojë ekzekutimin e skriptit përpara ndërtimit të CSSOM. Si rezultat, skriptet ekzekutohen menjëherë pasi të jenë ngarkuar (~ 1.6 sekonda), pa pritur për CSSOM. Një listë e shkurtër e rezultateve:
Pra, pse sugjeruam ende përdorimin e një modeli që përdor skriptet e krijuara në mënyrë dinamike?
Artikulli origjinal: "Skriptet asinkronike" të injektuara nga skriptet konsiderohen të dëmshme Artikull i korrigjuar nga: visitorFM, zenwalker, FMRobotElementi HTML përdoret për të futur ose referuar kodin e ekzekutueshëm; kjo zakonisht përdoret për të futur ose referuar kodin JavaScript. Elementi mund të përdoret gjithashtu me gjuhë të tjera, të tilla si gjuha programuese GLSL shader e WebGL.
| Përmbajtja e meta të dhënave, Përmbajtja e rrjedhës, Përmbajtja e frazave. |
| Skript dinamik si teksti/javascript. |
| Asnjë, si etiketa e fillimit ashtu edhe e mbarimit janë të detyrueshme. |
| Çdo element që pranon përmbajtjen e meta të dhënave, ose çdo element që pranon përmbajtje frazimi. |
| Asnje |
| HTMLScriptElement |
Për skriptet klasike, nëse atributi asinkron është i pranishëm, atëherë skripti klasik do të merret paralelisht me analizimin dhe do të vlerësohet sapo të jetë i disponueshëm.
crossorigin Elementet normale të skriptit kalojnë informacion minimal në dritare.onerror për skriptet që nuk kalojnë kontrollet standarde CORS. Për të lejuar regjistrimin e gabimeve për sajtet që përdorin një domen të veçantë për media statike, përdorni këtë atribut. Shikoni atributet e cilësimeve të CORS për një shpjegim më përshkrues të argumenteve të tij të vlefshme. shtyjKy atribut Boolean është caktuar për t'i treguar një shfletuesi se skripti është menduar të ekzekutohet pasi dokumenti të jetë analizuar, por përpara se të aktivizohet DOMContentLoaded.
Skriptet me atributin defer do të parandalojnë ndezjen e ngjarjes DOMContentLoaded derisa skripti të jetë ngarkuar dhe të përfundojë vlerësimin.
Ky atribut nuk duhet të përdoret nëse atributi src mungon (d.m.th. për skriptet inline), në këtë rast nuk do të kishte asnjë efekt.
Shembuj Përdorimi bazëKëta shembuj tregojnë se si të importoni (një skript të jashtëm) duke përdorur elementin.
Dhe shembujt e mëposhtëm tregojnë se si të vendosni (një skriptë inline) brenda elementit.
alarm ("Përshëndetje Botë!");
Rikthim i modulitShfletuesit që mbështesin vlerën e modulit për atributin tip injorojnë çdo skript me një atribut nomoduli. Kjo ju mundëson të përdorni skriptet e modulit, ndërkohë që ofroni skriptet e kthimit të shënuar me nomodule për shfletues që nuk mbështesin.
Specifikimet
| Standardi i jetesës HTML Përkufizimi i "" në atë specifikim. |
Standardi i jetesës | U hoq atributi i grupit të karaktereve |
| HTML5 Përkufizimi i "" në atë specifikim. |
Rekomandim | |
| Specifikimi i HTML 4.01 Përkufizimi i "" në atë specifikim. |
Rekomandim |
Tabela e përputhshmërisë në këtë faqe është krijuar nga të dhënat e strukturuara. Nëse dëshironi të kontribuoni në të dhënat, ju lutemi shikoni https://github.com/mdn/browser-compat-data dhe na dërgoni një kërkesë për tërheqje.
Përditësoni të dhënat e përputhshmërisë në GitHub
| Desktop celular | |||||||||||
| Chrome Edge Firefox Internet Explorer Opera Safari Android Pamje në internet Chrome për Android Firefox për Android Opera për Android Safari në iOS Samsung Internet | |||||||||||
| Mbështetje e plotë e Chrome 1 | Mbështetje e plotë Edge 12 | Mbështetje e plotë për Firefox 1 Shënime Mbështetje e plotë 1Shënime Shënime Duke filluar në Firefox 4, futja e elementeve që janë krijuar duke thirrur document.createElement("script") nuk e detyron më ekzekutimin sipas rendit të futjes. Ky ndryshim e lejon Firefox-in t'i përmbahet siç duhet specifikimeve. Për të bërë skriptet e jashtme të futura në skript të ekzekutohen sipas renditjes së tyre të futjes, vendosni .async=false mbi to. | IE Mbështetje e plotë Po | Opera Mbështetje e plotë Po | Safari Mbështetje e plotë Po | ||||||
| Mbështetje e plotë e Chrome 1 | Mbështetje e plotë Edge 12 | Mbështetje e plotë për Firefox 1 | IE Mbështetje e plotë Po | Opera Mbështetje e plotë Po | Safari Mbështetje e plotë Po | WebView Android Mbështetje e plotë Po | Chrome Android Mbështetje e plotë Po | Mbështetje e plotë për Firefox Android 4 | Opera Android Mbështetje e plotë Po | Safari iOS Mbështetje e plotë Po | Samsung Internet Android Mbështetje e plotë Po |
| Mbështetje e plotë e Chrome 30 | Mbështetje e plotë Edge ≤18 | Mbështetje e plotë për Firefox 13 | IE Nuk ka mbështetje Nr | Opera Mbështetje e plotë 12 | Safari Mbështetje e plotë Po Shënime Mbështetje e plotë PoShënime Shënime Atributi crossorigin u implementua në WebKit në defektin WebKit 81438. | WebView Android Mbështetje e plotë Po | Chrome Android Mbështetje e plotë Po | Mbështetje e plotë për Firefox Android 14 | Opera Android? | Safari iOS? | Samsung Internet Android Mbështetje e plotë Po |
| Chrome Mbështetje e plotë Po Shënime Mbështetje e plotë PoShënime Shënime Çështja e Chromium #611136, Çështja e Chromium #874749 | Mbështetje e plotë Edge 12 | Mbështetje e plotë për Firefox 3.5 Shënime Mbështetje e plotë 3.5Shënime Shënime Që nga Firefox 3.6, atributi defer injorohet në skriptet që nuk kanë atributin src. Megjithatë, në Firefox 3.5 edhe skriptet inline shtyhen nëse atributi defer është caktuar. | IE Mbështetje e plotë 10 Shënime Mbështetje e plotë 10Shënime Shënime Në versionet para Internet Explorer 10, ai zbatoi shtyrjen sipas një specifikimi të pronarit. Që nga versioni 10, ai përputhet me specifikimet e W3C. | Opera Mbështetje e plotë Po Shënime Mbështetje e plotë PoShënime Shënime Çështja e Chromium #611136, Çështja e Chromium #874749 | Safari Mbështetje e plotë Po | WebView Android Mbështetje e plotë Po Shënime Mbështetje e plotë PoShënime Shënime WebView nuk i shtyn skriptet me atributin defer kur faqja shërbehet si XHTML (application/xhtml+xml) - Chromium Issue #611136 , Chromium Issue #874749 | Chrome Android Mbështetje e plotë Po Shënime Mbështetje e plotë PoShënime Shënime Chrome nuk i shtyn skriptet me atributin defer kur faqja shërbehet si XHTML (application/xhtml+xml) - Chromium Issue #611136 , Chromium Issue #874749 | Mbështetje e plotë për Firefox Android 4 | Opera Android Mbështetje e plotë Po Shënime Mbështetje e plotë PoShënime Shënime Opera nuk i shtyn skriptet me atributin defer kur faqja shërbehet si XHTML (application/xhtml+xml) - Chromium Issue #611136 , Chromium Issue #874749 | Safari iOS Mbështetje e plotë Po | Samsung Internet Android Mbështetje e plotë Po Shënime Mbështetje e plotë PoShënime Shënime Samsung Internet nuk i shtyn skriptet me atributin defer kur faqja shërbehet si XHTML (application/xhtml+xml) - Chromium Issue #611136 , Chromium Issue #874749 |
| Mbështetje e plotë e Chrome 45 | Mbështetje e pjesshme e skajit 17 | Mbështetje e plotë për Firefox 43 | IE Nuk ka mbështetje Nr | Opera Mbështetje e plotë Po | Safari Mbështetje e plotë Po | WebView Android Mbështetje e plotë 45 | Mbështetje e plotë e Chrome Android 45 | Mbështetje e plotë për Firefox Android 43 | Opera Android? | Safari iOS Nuk ka mbështetje Nr | Samsung Internet Android Mbështetje e plotë 5.0 |
| Mbështetje e plotë e Chrome 1 | Mbështetje e plotë Edge 12 | Mbështetje e plotë për Firefox 1 | IE Mbështetje e plotë Po | Opera Mbështetje e plotë Po | Safari Mbështetje e plotë Po | WebView Android Mbështetje e plotë Po | Chrome Android Mbështetje e plotë Po | Mbështetje e plotë për Firefox Android 4 | Opera Android Mbështetje e plotë Po | Safari iOS Mbështetje e plotë Po | Samsung Internet Android Mbështetje e plotë Po |
| Mbështetje e plotë e Chrome 61 | Mbështetje e plotë Edge 16 | Mbështetje e plotë për Firefox 60 Mbështetje e plotë 60 Pa mbështetje 55 - 60 I paaftë I paaftë | IE Nuk ka mbështetje Nr | Opera Mbështetje e plotë 48 | Mbështetje e plotë Safari 11 | Firefox Android Mbështetje e plotë 60 Mbështetje e plotë 60 Pa mbështetje 55 - 60 I paaftë I paaftë Nga versioni 55 deri në versionin 60 (ekskluzive): kjo veçori qëndron prapa preferencës dom.moduleScripts.enabled (duhet të vendoset në true). Për të ndryshuar preferencat në Firefox, vizitoni about:config. | Mbështetje e plotë Safari iOS 11 | ||||
| Mbështetje e plotë e Chrome 70 | Mbështetje e plotë Edge ≤79 | Mbështetje e plotë për Firefox 65 | IE Nuk ka mbështetje Nr | Opera Mbështetje e plotë Po | Safari Pa mbështetje Nr | WebView Android Mbështetje e plotë 70 | Chrome Android Mbështetje e plotë 70 | Mbështetje e plotë për Firefox Android 65 | Opera Android? | Safari iOS Nuk ka mbështetje Nr | Samsung Internet Android Mbështetje e plotë 10.0 |
| Mbështetje e plotë e Chrome 1 | Mbështetje e plotë Edge 12 | Mbështetje e plotë për Firefox 1 | IE Mbështetje e plotë Po | Opera Mbështetje e plotë Po | Safari Mbështetje e plotë Po | WebView Android Mbështetje e plotë Po | Chrome Android Mbështetje e plotë Po | Mbështetje e plotë për Firefox Android 4 | Opera Android Mbështetje e plotë Po | Safari iOS Mbështetje e plotë Po | Samsung Internet Android Mbështetje e plotë Po |
| Mbështetje e plotë e Chrome 1 | Mbështetje e plotë Edge 12 | Mbështetje e plotë për Firefox 1 | IE Mbështetje e plotë Po | Opera Mbështetje e plotë Po | Safari Mbështetje e plotë Po | WebView Android Mbështetje e plotë Po | Chrome Android Mbështetje e plotë Po | Mbështetje e plotë për Firefox Android 4 | Opera Android Mbështetje e plotë Po | Safari iOS Mbështetje e plotë Po | Samsung Internet Android Mbështetje e plotë Po |
| Mbështetje e plotë e Chrome 1 | Mbështetje e plotë Edge 12 | Mbështetje e plotë për Firefox 1 | IE Mbështetje e plotë Po | Opera Mbështetje e plotë Po | Safari Mbështetje e plotë Po | WebView Android Mbështetje e plotë Po | Chrome Android Mbështetje e plotë Po | Mbështetje e plotë për Firefox Android 4 | Opera Android Mbështetje e plotë Po | Safari iOS Mbështetje e plotë Po | Samsung Internet Android Mbështetje e plotë Po |
| Mbështetje e plotë e Chrome 61 | Mbështetje e plotë Edge 16 | Mbështetje e plotë për Firefox 60 Mbështetje e plotë 60 Pa mbështetje 54 - 60 I paaftë I paaftë | IE Nuk ka mbështetje Nr | Opera Mbështetje e plotë 48 | Mbështetje e plotë Safari 10.1 | WebView Android Mbështetje e plotë 61 | Mbështetje e plotë e Chrome Android 61 | Firefox Android Mbështetje e plotë 60 Mbështetje e plotë 60 Pa mbështetje 54 - 60 I paaftë I paaftë Nga versioni 54 deri në versionin 60 (ekskluzive): kjo veçori qëndron prapa preferencës dom.moduleScripts.enabled (duhet të vendoset në true). Për të ndryshuar preferencat në Firefox, vizitoni about:config. | Opera Android Mbështetje e plotë 45 | Safari iOS Mbështetje e plotë 10.3 | Samsung Internet Android Mbështetje e plotë 8.0 |
| Chrome Nuk ka mbështetje Nr | Edge Pa mbështetje Nr | Firefox nuk ka mbështetje? - 59 | IE Nuk ka mbështetje Nr | Opera Pa mbështetje Nr | Safari Pa mbështetje Nr | WebView Android Nuk ka mbështetje Nr | Chrome Android Nuk ka mbështetje Nr | Firefox Android Nuk ka mbështetje? - 59 | Opera Android Nuk ka mbështetje Nr | Safari iOS Nuk ka mbështetje Nr | Samsung Internet Android Nuk ka mbështetje Nr |
Në shfletuesit më të vjetër që nuk mbështesin atributin async, skriptet e futura nga parser bllokojnë analizuesin; skriptet e futura në skript ekzekutohen në mënyrë asinkrone në IE dhe WebKit, por në mënyrë sinkrone në Opera dhe Firefox para-4. Në Firefox 4, vetia async DOM është e paracaktuar e vërtetë për skriptet e krijuara nga skriptet, kështu që sjellja e paracaktuar përputhet me sjelljen e IE dhe WebKit.
Për të kërkuar që skriptet e jashtme të futura nga skriptet të ekzekutohen sipas renditjes së futjes në shfletues ku document.createElement("script").async vlerësohet me true (siç është Firefox 4), vendosni async="false" në skriptet që dëshironi të ruani urdhëroj.
Asnjëherë mos telefononi document.write() nga një skript asinkronik. Në Firefox 3.6, thirrja e document.write() ka një efekt të paparashikueshëm. Në Firefox 4, thirrja e document.write() nga një skript asinkronik nuk ka asnjë efekt (përveç printimit të një paralajmërimi në tastierën e gabimit).
Async dhe Defer - Strategjitë e ngarkimit të JavaScript
JavaScript është një pjesë integrale e çdo aplikacioni modern në internet dhe strategjitë që vendosim të përdorim për ngarkim ndikojnë drejtpërdrejt në performancën e po atij aplikacioni. Në këtë artikull, ne do të përpiqemi të kuptojmë ndryshimet e rëndësishme midis secilës qasje, të mirat dhe të këqijat së bashku me implikimet e performancës dhe si të optimizojmë për ndërveprimin e faqeve dhe kohën e ngarkimit.
Për të demonstruar, unë do të krijoj një faqe interneti të përbërë nga varësitë e jashtme të mëposhtme. Kushtojini vëmendje të veçantë madhësive të duhura të skedarëve, pasi kohët e shkarkimit të skedarëve janë drejtpërdrejt proporcionale me këtë.
- HTML - faqe ~ 1 MB. Përmban shënimin/përmbajtjen aktuale për të treguar disa rezultate dinamike nga JavaScript.
- Imazhi - image1.png ~ 5 MB
- JavaScript - file1.JS ~3MB është thelbi (skedari kryesor) i javascript dhe varet nga analizimi i HTML. Është e nevojshme për të shfaqur disa përmbajtje dinamike ose për të montuar një komponent react/këndor në faqe.
- JavaScript - file2.js ~460B është një skedar i vogël, i pavarur javascript që ndërvepron me dom.
- JavaScript - file3.js ~ 1,5 MB - Ky është një skedar dytësor js dhe varet nga file1.js për të ekzekutuar disa kode me përparësi më të ulët. Ky kod nuk kërkohet menjëherë për paraqitjen e faqes dhe ndërveprimin e përdoruesit; tregon ikona të mediave sociale, komente, ndihmë në internet, nisjen e disa detyrave analitike, etj.
Qasja-1 [skriptet në seksionin kryesor]
Në rastin e parë, ne do të ngarkojmë të gjitha etiketat e skripteve në seksionin kokë të HTML-së tonë. Më poshtë është një pamje ekrani e një analize të faqes së skedës së rrjetit të kromit, gati për ndërveprimin e përdoruesit.
Të mirat:
Sekuenca e ekzekutimit të kodit të skedarëve të ndryshëm JS do të ruhet në rendin në të cilin skedarët janë përfshirë në HTML. Në shembullin aktual, edhe nëse skedari2 dhe skedari3 janë ngarkuar përpara skedarit1, rendi i ekzekutimit do të jetë i saktë.
Minuset:
Në këtë skenar, analizimi i HTML do të ndërpritet derisa të 3 skriptet në seksionin kokë të jenë ngarkuar, analizuar dhe ekzekutuar. Një ekran i bardhë bosh do t'i shfaqet përdoruesit edhe nëse skedari HTML është shkarkuar tashmë [por jo i analizuar]. Kjo sigurisht nuk është e mirë për përdorshmërinë.
Asnjë nga skriptet e mësipërme nuk do të jetë në gjendje të aksesojë/manipulojë faqen HTML pasi DOM nuk është ende gati. Një zgjidhje e mundshme për të trajtuar këtë çështje është të dëgjoni për ngjarjen DOMContentLoaded dhe më pas të ekzekutoni kodin. Ngjarja DOMContentLoaded aktivizohet kur dokumenti burimor HTML është ngarkuar dhe analizuar plotësisht, pa pritur që fletët e stilit, imazhet të mbarojnë ngarkimin.
Qasja-2 [skriptet në fund]
Për të kapërcyer 2 problemet me të cilat përballemi në qasjen e parë, le të ngarkojmë të 3 skriptet në fund të etiketës së trupit.
Pro: HTML analizohet përpara se të ngarkohen skriptet, kështu që përdoruesi do të jetë në gjendje të shohë përmbajtjen aktuale menjëherë në vend që të presë për skriptet.
Meqenëse të gjitha skriptet ekzekutohen pas analizimit të HTML, ata të gjithë mund të hyjnë në DOM për çdo manipulim. Sekuenca e ekzekutimit të skenarit është ruajtur.
Minuset:
Nuk ka asnjë fitim të performancës si i tillë.
Qasja-3 [Përdorimi i atributit Async]
HTML5 prezantoi atributin e skriptit async, i cili ndihmon në ngarkimin e skedarëve përkatës të skriptit paralelisht në një thread tjetër pa ndikuar në analizimin e HTML.
Sidoqoftë, skripti përkatës do të analizohet dhe ekzekutohet sapo të përfundojë ngarkimi, pavarësisht nëse analizimi i HTML është i plotë apo jo, dhe do të ketë një referencë për elementin DOM deri në atë pikë specifike.
Këtu mund të shihni qartë se file2.js ishte ngarkuar përpara skedarit HTML. Megjithatë, ndërsa shfletuesi është duke ngarkuar skedarin2, ai nuk e ka ndalur analizimin e HTML-së dhe për shkak të kësaj, në kohën kur ai ekzekutohet - ai ka një lidhje me mbajtësin e html për të prezantuar përmbajtje dinamike.
Përparësitë: Meqenëse skriptet janë ngarkuar në një fill tjetër, analizimi i HTML nuk do të ndërpritet dhe përdoruesi do të jetë në gjendje të shohë përmbajtjen e menjëhershme në vend të një ekrani të bardhë bosh. Fitimi kryesor i performancës, d.m.th. koha e DOMContentLoaded u ul nga 47,68 sekonda në vetëm 21,12 sekonda dhe është ~55% rritje.
Minuset:
Sekuenca e ekzekutimit JS nuk ruhet. Ai funksionon në rendin e duhur të ngarkimit, në vend të sekuencës së përfshirë të skripteve brenda HTML. Mbështetja e shfletuesit - Nuk mbështetet në shfletuesit më të vjetër të internetit, p.sh. IE 9 dhe më poshtë.
Çfarë ndodh nëse JS ngarkohet përpara se elementi DOM të jetë i aksesueshëm? Do të shfaqet një gabim.
Shënim: Vendosja e skripteve me atributin async në fund të seksionit të trupit do të jetë e padobishme dhe ekuivalente me qasjen-2.
Qasja-4 [Përdorimi i atributit Defer]
Atributi Defer do të detyrojë skriptin të ekzekutohet vetëm pasi të ketë përfunduar analizimi i HTML. Një pikë shumë e rëndësishme për t'u marrë parasysh këtu është se Chrome nuk e mbështet ende shtyrjen dhe nuk ka asnjë efekt në kohëzgjatjen e DOMContentLoaded. Megjithatë, ai ekzekuton skriptet në fund të analizës HTML.
Të mirat:
Sekuenca e importimit të skriptit ruhet. Pra, file3.js ekzekutohet vetëm pasi skedari 1 të ketë përfunduar ngarkimin dhe ekzekutimin, edhe nëse skedari3 është ngarkuar më parë.
Mbështetja e shfletuesit - Ka mbështetje më të mirë të shfletuesit në krahasim me atributin async, d.m.th. mbështetet pjesërisht në IE v6-9
Skriptet mund të hyjnë në DOM sepse ai ekzekutohet vetëm pasi të jetë analizuar HTML-ja e plotë.
Minuset:
Fillimisht mendova se shtyrja do të ishte një zgjedhje më e mirë sesa asinkronizimi, por më vonë zbulova se Chrome nuk e mbështet ende [versioni 71.0.3578.98] dhe nuk ka asnjë efekt në kohëzgjatjen e DOMContentLoaded.
Sidoqoftë, funksionon siç pritej në Firefox me një përmirësim të ndjeshëm të performancës.
konkluzionet
Preferohet të vendosni etiketat e skriptit në seksionin kokë me atributin async për bibliotekat e palëve të treta që varen nga Google Analytics, Google reCAPTCHA ose çdo gjë tjetër që nuk kërkon qasje në DOM, pasi skriptet përkatëse ngarkohen paralelisht, por ekzekutohen menjëherë.
Përdorni defer për të gjithë skriptet e tjera të ngarkuara në seksionin kokë pasi ato gjithashtu do të ngarkohen paralelisht, por do të ekzekutohen vetëm pasi të përfundojë analizimi i HTML dhe DOM të jetë gati për t'u aksesuar/manipuluar.
Ju gjithashtu mund të përdorni kombinimin e dëgjuesit DOMContentLoaded brenda skripteve asinkronë për të kryer funksionalitetin më vonë. Ju lutemi lini mendimet dhe përfundimet tuaja në komente dhe unë do të jem i lumtur t'i diskutoj ato me ju.
Autori i këtij materiali jam unë, Yuri Pakholkov. Ofroj shërbime për shkrimin e programeve në Java, C++, C# (dhe gjithashtu konsultime mbi to) dhe krijimin e faqeve të internetit. Unë punoj me sajte në CMS OpenCart, WordPress, ModX dhe ato të shkruara vetë. Përveç kësaj, unë punoj drejtpërdrejt me JavaScript, PHP, CSS, HTML - domethënë, unë mund të përmirësoj faqen tuaj të internetit ose të ndihmoj me programimin e uebit.
Skriptet shtesë (JavaScript) bllokojnë ngarkimin e kodit HTML. Kur shfletuesi (parseri) arrin etiketën, ai ndalon të ngarkojë përmbajtjen e skedarit dhe të ekzekutojë kodin e tij, dhe vetëm atëherë vazhdon analizimin e HTML.
Kjo sjellje mund të ngadalësojë paraqitjen e HTML kur ka shumë skedarë JavaScript të ngarkuar në një faqe. Shpesh kodi në këto skedarë nuk është i nevojshëm për të shfaqur HTML-në e faqes. Kjo është arsyeja pse rekomandohet të përfshini skriptet në fund të faqes. Megjithatë, ky rekomandim nuk mund të ndiqet gjithmonë dhe në raste të tilla ka mënyra të tjera për të shmangur bllokimin e paraqitjes së HTML.
Elementi ka dy atribute, async dhe defer, të cilat mund të na japin më shumë kontroll se si dhe kur skedari shkarkohet dhe ekzekutohet.
Ekzekutimi normal ... ... .... atribut asinkron
atribut shtyrje 
Ku dhe çfarë të përdorni? Varet nga situata. Le të shqyrtojmë disa pyetje mbi këtë temë.
Ku ndodhet elementi?Nëse skedari JavaScript ndodhet menjëherë përpara etiketës mbyllëse, përdorimi i asinkronizimit ose i shtyrjes nuk ka kuptim pasi në këtë pikë analizuesi ka analizuar tashmë të gjithë kodin HTML.
A është skenari i pavarur?Për skedarët (skriptet) që nuk nevojiten që skriptet e tjera të funksionojnë dhe që vetë nuk kanë varësi nga skriptet e tjera, atributi async është veçanërisht i dobishëm. Meqenëse në këtë rast nuk ka rëndësi se në cilën pikë ekzekutohet skripti, ngarkimi asinkron është opsioni më i përshtatshëm.
A më duhet një DOM i ngarkuar plotësisht që skripti të funksionojë?Nëse kjo është e nevojshme, atëherë përdorimi i asinkronizimit është i përshtatshëm vetëm nëse skripti është krijuar për ngarkim asinkron - d.m.th. ai pret ngjarjen derisa të ngarkohet DOM dhe vetëm atëherë fillon punën e tij.
Ose mund të përdorni atributin defer. Në këtë rast, ju mund të vendosni thirrjen e skriptit kudo në HTML.
A është skenari i vogël?Nëse skripti është relativisht i vogël dhe varet nga ai ose varet nga skriptet e tjera, atëherë ai mund të futet drejtpërdrejt në HTML (lidheni në linjë).
Mbështetja e shfletuesit 97% Shtimi i atributeve të shtyrjes ose asinkronizimit në WordPressNuk ka mënyra standarde për ta bërë këtë, kështu që ne do të përdorim grepin script_loader_tag:
Add_action("wp_enqueue_scripts", "my_scripts_method"); funksioni my_scripts_method())( // lidh skriptin wp_enqueue_script ("my-script", get_template_directory_uri() . "/js/my-script.js"); // Shto atributin defer në skript me id `my-script ` add_filter("script_loader_tag", "change_my_script", 10, 3); funksion change_my_script($tag, $handle, $src)( if("my-script" === $handle)( // return str_replace(" src ", " async src", $tag); ktheje str_replace(" src", "defer src", $tag); ) ktheje $tag; ) )
