Sveiki, draugai! Ar žinojote, kad „JavaScript“ įkėlimas yra viena didžiausių svetainių našumo kliūčių? Šiandien mano pagrindinė užduotis yra paaiškinti, kas yra scenarijus ir kaip jis veikia svetainės greitį ir našumą.
Naršyklė, įkelianti scenarijaus žymą, nustoja pateikti puslapį, kol scenarijus neįkeliamas ir neįvykdomas. Puslapis užblokuotas ir naršyklė nereaguoja į vartotojo veiksmus porą sekundžių. Delsimo laikas priklauso nuo kelių veiksnių:
konfigūracija,
interneto ryšio greitis,
failo dydis ir kiti ...
Dėl šios priežasties „Google PageSpeed Insights“ rekomenduoja pašalinti puslapio viršuje ekraną blokuojantį „JavaScript“. Gera praktika - scenarijus patalpinti svetainės apačioje, pavyzdžiui, prieš uždarymo žymą.
arba nustatyti asinchroninį įkėlimą.
Jei scenarijaus kodas turi įtakos viršutinės svetainės dalies rodymui, nedėkite jo į atskirą failą, bet įdėkite jį tiesiai į HTML.
JS gali pakeisti svetainės turinį ir netgi nukreipti į kitą URL. Tokiu atveju, scenarijaus prijungimas dokumento pabaigoje sukels puslapio „trūkčiojimą“, įkeliant naujus arba keičiant esamus elementus viršuje.
Taikant scenarijaus žymą asinchronizavimo ir atidėjimo atributus
Pažvelkime, kas yra asinchroninis ir atidėtas „JavaScript“ darbas ir koks yra esminis skirtumas tarp asinchroninio ir atidėtojo atributų. Bet pirmiausia pažvelkime į dokumentų apdorojimo seką su įprastu scenarijaus žymos ryšiu.
Įkeliant ir vykdant scenarijų nutraukiamas HTML kodo analizavimas, tada jis tęsiamas. Tinklapio rodymas vėluoja.
Atidėti atributą
Atidėjimo atributas leidžia naršyklei pradėti lygiagrečiai įkelti js failus, nenutraukiant tolesnio puslapio apdorojimo. Jie vykdomi visiškai išanalizavus dokumento objekto modelį (trumpai - DOM), o naršyklė garantuoja nuoseklumą, pagrįstą failų prijungimo tvarka.
< atidėti src = "example.js">
Async atributas
Async atributo palaikymas atsirado HTML5, jis leidžia naršyklei įkelti js failus lygiagrečiai ir vykdyti iškart po įkėlimo, nelaukiant, kol bus apdorota likusi puslapio dalis.
< async src = "example.js">
Apdorojimo sekos diagrama:
Tai asinchroninis atsisiuntimas. Šis atributas rekomenduojamas scenarijams, kurie neturi didelės įtakos dokumento rodymui. Tai statistikos rinkimo skaitikliai („Google Analytics“, „Yandex Metrica“), skelbimų tinklo kodai („Yandex“ reklamavimo tinklas, „Google AdSense“), socialinės žiniasklaidos mygtukai ir pan.
Svetainės įkėlimo greitis yra vienas iš reitingo veiksnių „Google“.
Asinchroninis „JavaScript“ ryšys sumažina puslapio įkėlimo laiką, pašalindamas delsą. Kartu rekomenduoju suspausti ir sujungti js failus į vieną, pavyzdžiui, naudojant biblioteką. Vartotojams patinka greitos svetainės 😎
„Async“ ir „Defer“ - „JavaScript“ įkėlimo strategijos
„JavaScript“ yra esminė bet kurios šiuolaikinės žiniatinklio programos dalis, o mūsų pasirinktos įkėlimo strategijos tiesiogiai veikia tos pačios programos našumą. Šiame straipsnyje mes stengsimės suprasti svarbius kiekvieno metodo skirtumus, privalumus ir trūkumus bei poveikį našumui ir tai, kaip optimizuoti puslapio sąveiką ir įkėlimo laiką.
Demonstracijai aš sukursiu svetainę, kurią sudarys šios išorinės priklausomybės. Atkreipkite ypatingą dėmesį į atitinkamus failų dydžius, nes failų atsisiuntimo laikas yra tiesiogiai proporcingas tam.
HTML - puslapis ~ 1 MB. Yra faktinis žymėjimas / turinys, rodantis tam tikrą dinamišką „JavaScript“ išvestį.
Vaizdas - image1.png ~ 5 Mb
„JavaScript“ - failas1.JS ~ 3 MB yra pagrindinis (pagrindinis failas) „JavaScript“ ir priklauso nuo HTML analizės. Jis reikalingas tam, kad būtų rodomas tam tikras dinaminis turinys arba kad puslapyje būtų sumontuotas reaguojantis / kampinis komponentas.
„JavaScript“ - file2.js ~ 460B yra mažas, nepriklausomas „JavaScript“ failas, sąveikaujantis su dom.
„JavaScript“ - file3.js ~ 1,5 MB yra antrinis „js“ failas ir priklauso nuo failo1.js, kad įvykdytų mažesnio prioriteto kodą. Šis kodas nereikalingas iš karto puslapių atvaizdavimui ir naudotojo sąveikai; jame rodomos socialinės žiniasklaidos piktogramos, komentarai, internetinė pagalba, pradedamos kai kurios analizės užduotys ir kt.
Dabar atėjo laikas analizuoti įvairius metodus
1 metodas [scenarijai antraštėje]
Pirmuoju atveju mes įkeliame visas scenarijų žymas į mūsų HTML pagrindinę skiltį. Žemiau yra „Chrome“ puslapio tinklo skirtuko analizės ekrano kopija, paruošta naudotojui sąveikauti.
Argumentai "už":
Įvairių JS failų kodo vykdymo seka bus išsaugota tokia tvarka, kokia failai buvo įtraukti į HTML. Dabartiniame pavyzdyje, net jei failas2 ir failas3 buvo įkelti prieš failą1, vykdymo tvarka bus teisinga.
Minusai:
Tokiu atveju HTML analizavimas bus pristabdytas, kol bus įkelti, išanalizuoti ir įvykdyti visi 3 scenarijai galvos skiltyje. Tuščias baltas ekranas bus rodomas vartotojui, net jei HTML failas jau buvo įkeltas [bet ne išanalizuotas]. Tai tikrai nėra naudinga naudojimui.
Nė vienas iš aukščiau išvardytų scenarijų negalės pasiekti / manipuliuoti HTML puslapiu, nes DOM dar nėra paruoštas. Vienas iš galimų šios problemos sprendimo būdų yra klausytis įvykio „DOMContentLoaded“ ir po to vykdyti kodą. DOMContentLoaded Šis įvykis suaktyvinamas, kai originalus HTML dokumentas yra visiškai įkeltas ir išanalizuotas, nelaukiant, kol bus baigtas įkelti stilių lapas ir vaizdai.
2 metodas [scenarijai pabaigoje]
Norėdami įveikti 2 problemas, su kuriomis susiduriame taikydami pirmąjį metodą, įkelkime visus 3 scenarijus body tag apačioje.
Argumentai "už": HTML yra išanalizuojamas prieš įkeliant scenarijus, todėl vartotojas galės iš karto pamatyti tikrąjį turinį, o ne laukti scenarijų.
Kadangi visi scenarijai vykdomi išanalizavus HTML, jie visi gali pasiekti DOM bet kokiam manipuliavimui. Išsaugoma scenarijaus vykdymo seka.
Minusai:
Našumo padidėjimo nėra.
3 metodas [naudojant „Async“ atributą]
HTML5 pristatė asinchroninio scenarijaus atributą, kuris padeda įkelti atitinkamus scenarijaus failus lygiagrečiai kitame sraute, nedarant įtakos HTML analizavimui.
Tačiau atitinkamas scenarijus bus išanalizuotas ir įvykdytas, kai tik jis bus baigtas įkelti, nesvarbu, ar HTML analizė baigta, ar ne, ir nurodys DOM elementą iki to konkretaus taško.
Čia aiškiai matote, kad file2.js buvo įkelta prieš HTML failą. Tačiau, kol naršyklė įkelė failą2, ji nesustabdė HTML analizės ir dėl to, kol ji buvo įvykdyta, ji turėjo nuorodą į html vietos žymeklį, kad įvestų dinaminį turinį.
Argumentai "už": Kadangi scenarijai įkeliami į kitą giją, HTML analizė nebus pristabdyta ir vartotojas galės matyti tiesioginį turinį, o ne baltą tuščią ekraną. Pagrindinis našumas, ty „DOMContentLoaded“ laikas sumažėjo nuo 47,68 sekundės iki tik 21,12 sekundės ir yra ~ 55% padidėjimo.
Minusai:
JS vykdymo seka nėra išsaugota. Jis vykdomas tinkama įkėlimo tvarka, o ne įtraukta HTML scenarijaus seka. Naršyklės palaikymas - nepalaikomas senesnėse interneto naršyklėse, ty IE 9 ir senesnėse versijose.
Kas atsitiks, jei JS bus įkelta dar nepasiekus DOM elemento? Bus išmesta klaida.
Pastaba: scenarijų su async atributu įdėjimas kūno dalies apačioje būtų nenaudingas ir atitiktų 2 metodą.
4 metodas [naudojant atidėjimo atributą]
Atributas „Atidėti“ sukels scenarijų tik tada, kai bus baigtas HTML analizavimas. Čia reikia nepamiršti vieno labai svarbaus dalyko: „Chrome“ dar nepalaiko atidėjimo ir neturi jokios įtakos „DOMContentLoaded“ trukmei. Tačiau ji vykdo scenarijus HTML analizės pabaigoje.
Argumentai "už":
Išsaugoma scenarijų importavimo seka. Taigi „file3.js“ vykdomas tik tada, kai atsisiuntimas baigtas ir failas 1 vykdomas, net jei failas3 buvo įkeltas anksčiau.
Naršyklės palaikymas - jis turi geresnį naršyklės palaikymą, palyginti su atributu „async“, t. Y. Jis iš dalies palaikomas „IE v6-9“
Skriptai gali pasiekti DOM, nes jis vykdomas tik išanalizavus visą HTML.
Minusai:
Iš pradžių maniau, kad atidėjimas būtų geresnis pasirinkimas nei asinchroninis, tačiau vėliau sužinojau, kad „Chrome“ dar nepalaiko jo [versija 71.0.3578.98] ir neturi jokios įtakos „DOMContentLoaded“ trukmei.
Tačiau jis veikia taip, kaip tikėtasi „Firefox“, žymiai pagerinus našumą.
išvadas
Trečiųjų šalių bibliotekoms, kurios priklauso nuo „Google Analytics“, „Google reCAPTCHA“ ar bet ko kito, kuriai nereikia DOM prieigos, pageidautina įterpti scenarijaus žymas į galvos skiltį su async atributu, nes atitinkami scenarijai įkeliami lygiagrečiai, bet vykdomi nedelsiant .
Naudokite atidėjimą visiems kitiems scenarijams, įkeliamiems į galvos skiltį, nes jie taip pat bus įkeliami lygiagrečiai, tačiau bus vykdomi tik tada, kai HTML bus baigtas analizuoti ir DOM bus paruoštas pasiekti / manipuliuoti.
Taip pat galite naudoti „DOMContentLoaded“ klausytojų derinį asinchroniniuose scenarijuose, kad vėliau atliktumėte funkcijas. Prašome palikti savo nuomonę ir išvadas komentaruose, ir aš mielai juos aptarsiu.
Šios medžiagos autorius esu aš - Jurijus Pakholkovas. Teikiu programas, skirtas rašyti „Java“, „C ++“, „C #“ (taip pat konsultuoti jomis) ir kurti svetaines. Dirbu su CMS OpenCart, WordPress, ModX svetainėmis ir savarankiškai parašytomis svetainėmis. Be to, dirbu tiesiogiai su „JavaScript“, PHP, CSS, HTML - tai yra, galiu pakeisti jūsų svetainę arba padėti programuoti žiniatinklį.
Įskiepių scenarijai („JavaScript“) blokuoja HTML kodo įkėlimą. Kai naršyklė (analizatorius) pasiekia žymą
Šie pavyzdžiai parodo, kaip įterpti (įterptąjį) scenarijų į
Atsarginis modulis
Naršyklės, palaikančios tipo atributo modulio reikšmę, ignoruoja bet kokį scenarijų su nomodule atributu. Tai leidžia jums naudoti modulio scenarijus, kartu pateikiant ir „nomodule“ pažymėtus atsarginius scenarijus nepalaikančioms naršyklėms.
Dažnai būna gedimų, problemų ar paprasčiausias noras pakeisti programinę -aparatinę įrangą. Iki tam tikro laiko prietaisas, kuriam suteikiama oficiali garantija, gali būti atnaujintas ...
„Vkontakte“ grupės palaikymas yra gana sudėtingas procesas, o netinkamu požiūriu galite sugadinti visą darbą. Šiame straipsnyje kalbėsiu apie svarbius ...
Apgaukite draugus „VKontakte“ nemokamai
Kaip iš tikrųjų užsidirbti pinigų internete be investicijų pradedantiesiems Tikri būdai užsidirbti pinigų internete be investicijų
Elgesio skatinimo veiksniai ir darbo metodai jiems tobulinti
Kaip sužinoti ir padidinti srautą į „VKontakte“ puslapį
Greito įkrovimo naudojimas „Honor“ telefone