Nakala Javascript Async SRC imesababishwa. Download Asynchronous JavaScript - Kuharakisha ukurasa upakiaji. Kuongeza sifa za Defer au Async katika WordPress.
29.06.2020
Salamu, marafiki! Je! Unajua kwamba kupakua JavaScript ni moja ya maeneo nyembamba zaidi katika utendaji wa tovuti? Leo, kazi yangu kuu ni kuelezea nini script ni jinsi gani inathiri kasi na utendaji wa tovuti.
Kivinjari cha kupakia lebo ya script kinaacha utoaji wa ukurasa mpaka script imepakuliwa na haijatimizwa. Ukurasa umezuiwa na kivinjari haijibu kwa vitendo vya mtumiaji. Muda wa kuchelewa unategemea mambo kadhaa:
maunganisho
kasi ya uunganisho wa mtandao
ukubwa wa faili na nyingine ...
Kwa sababu hii, tovuti ya Google Plagesingspeed Speed \u200b\u200bSpeed \u200b\u200bSpeed \u200b\u200bAnalyzer inapendekeza kuondoa code ya JavaScript kutoka juu ya ukurasa kuzuia kuonyesha yake. Mazoezi mazuri ni uwekaji wa scripts chini ya tovuti, kwa mfano, mbele ya lebo ya kufunga
au kuweka upakiaji wa asynchronous.
Ikiwa msimbo wa script huathiri maonyesho ya juu ya tovuti - usiingie kwenye faili tofauti, lakini uingie moja kwa moja kwenye HTML.
JS inaweza kubadilisha yaliyomo ya tovuti na hata kuelekeza kwenye URL nyingine. Katika kesi hiyo, uhusiano wa script mwishoni mwa hati utasababisha athari ya "kunyoosha" ya ukurasa, kupakia mpya au kubadilisha vipengele vilivyopo juu.
Tumia Async na sifa za defer kwa Tag Script.
Hebu tufanye jambo hilo kuwa ni kazi ya JavaScript ya Asynchronous na iliyorejeshwa na ambayo ni tofauti kuu kati ya sifa za async na defer. Lakini kwanza fikiria mlolongo wa usindikaji wa hati katika uunganisho wa kawaida wa lebo ya script.
< sRC \u003d "Mfano.js" \u003e.
Katika mfano wa kuona, nitatumia notation ya masharti yafuatayo:
- Usindikaji wa Ukurasa. - Pakua script. - Utekelezaji wa script.
Hivyo, mlolongo wa usindikaji hutokea kulingana na mpango wafuatayo:
Uchunguzi wa kificho wa HTML unaingiliwa wakati wa kupakia na kutekeleza script, baada ya hapo inaendelea. Maonyesho ya wavuti hutokea kwa kuchelewa.
Sifa ya defer.
Tabia ya Defer inaruhusu kivinjari kuanza kupakia faili za JS kwa sambamba bila kuacha usindikaji wa ukurasa zaidi. Utekelezaji wao hutokea baada ya kupitisha kamili ya mfano wa kitu cha waraka (kutoka kwa mfano wa hati ya Kiingereza, iliyochapishwa na DOM), wakati kivinjari kinalenga mlolongo kulingana na utaratibu wa kuunganisha faili.
< defer src \u003d "mfano.js" \u003e.
Tabia async.
Msaada wa Async Attrite ulionekana katika HTML5, inaruhusu kivinjari kupakua faili za JS kwa sambamba na kufanya mara baada ya kupakia, bila kusubiri usindikaji wa ukurasa wote.
< async src \u003d "mfano.js" \u003e.
Mchoro wa mlolongo wa usindikaji:
Hii ni upakiaji wa asynchronous. Tabia inapendekezwa kwa scripts vile ambazo hazina athari kubwa juu ya kuonyesha hati. Hizi ni pamoja na takwimu za ukusanyaji wa takwimu (Google Analytics, metri ya Yandex), nambari za mtandao wa matangazo (mtandao wa matangazo ya Yandex, Google AdSense), vifungo vya mtandao wa kijamii, na kadhalika.
Kupakua kasi ya tovuti ni moja ya mambo ya cheo cha Google.
Uunganisho wa JavaScript unapunguza muda wa kupakia ukurasa kutokana na ukosefu wa kuchelewa. Pamoja na hili, mimi kupendekeza compressing na kuchanganya faili JS kwa moja, kwa mfano, kwa kutumia maktaba. Watumiaji kama maeneo ya haraka 😎
ASync na Defer - Javascript kupakua mikakati.
JavaScript ni sehemu muhimu ya programu yoyote ya kisasa ya wavuti, na mikakati ambayo tunaamua kutumia kupakua moja kwa moja kuathiri utendaji wa programu hii yenyewe. Katika makala hii, tutajaribu kuelewa tofauti muhimu kati ya kila njia, faida na hasara. Pamoja na madhara ya utendaji na njia za kuboresha mwingiliano na ukurasa na wakati wa kupakua.
Ili kuonyesha, nitaunda tovuti yenye tegemezi za nje zifuatazo. Kulipa kipaumbele maalum kwa ukubwa sahihi wa faili, kwa kuwa wakati wa kupakua wa faili ni sawa na hii.
HTML - Ukurasa ~ 1 MB. Ina alama halisi / maudhui ili kuonyesha pato la nguvu kutoka kwa JavaScript.
Image - Image1.png ~ 5 MB.
JavaScript - File1.js ~ 3 MB ni kernel (faili kuu) JavaScript na inategemea uchambuzi wa html syntactic. Inahitajika kuonyesha yaliyomo ya nguvu au mlima kipengele cha kugundua / angular kwenye ukurasa.
JavaScript - File2.js ~ 460b ni faili ndogo, ya kujitegemea ya javascript inayoingiliana na DOM.
Javascript - File3.js ~ 1.5 MB ni faili ya sekondari ya JS ya sekondari na inategemea faili1.js kufanya baadhi ya msimbo wa chini wa kipaumbele. Nambari hii haihitajiki mara moja kwa utoaji wa ukurasa na kuingiliana na mtumiaji; Inaonyesha icons ya mitandao ya kijamii, maoni, msaada wa mtandaoni, uzindua kazi za analytics, nk.
Sasa ni wakati wa kuchambua mbinu mbalimbali
Njia-1 [Maandiko katika sehemu ya kichwa]
Katika kesi ya kwanza, tutapakua vitambulisho vyote vya scripts katika sehemu ya kichwa cha HTML yetu. Chini ni skrini ya kichupo cha Mtandao wa Chrome, tayari kuingiliana na mtumiaji.
Faida:
Mlolongo wa Kanuni ya faili mbalimbali za JS utahifadhiwa kwa utaratibu ambao faili zilijumuishwa katika HTML. Kwa mfano wa sasa, hata kama faili2 na faili3 zilipakuliwa kwa faili1, utaratibu wa utekelezaji utakuwa sahihi.
Minuses:
Katika hali hii, uchambuzi wa syntax wa html utasimamishwa mpaka maandiko yote 3 yamepakiwa kwenye sehemu ya kichwa, kuchambuliwa na kutekelezwa. Screen nyeupe tupu itaonyeshwa kwa mtumiaji, hata kama faili ya HTML tayari imewekwa [lakini haijachambuliwa]. Hii ni dhahiri si nzuri kwa usability.
Hakuna ya scripts hapo juu inaweza kufikia / kuendesha ukurasa wa HTML, kama Dom si tayari bado. Moja ya ufumbuzi iwezekanavyo wa usindikaji tatizo hili ni kusikiliza kwa tukio la domcontentloaded, na kisha utekelezaji wa kanuni baada ya hapo. DomContentLoadDigital inasababishwa wakati hati ya HTML ya chanzo ilikuwa imejaa kikamilifu na kuchambuliwa, bila kusubiri kupakia kupakua meza za mtindo, picha.
Njia-2 [scripts mwisho]
Ili kuondokana na matatizo 2 ambayo tunakabiliwa nayo katika njia ya kwanza, hebu tupate scripts zote 3 chini ya tag ya mwili.
Faida: HTML inachambuliwa kabla ya kupakua scripts, hivyo mtumiaji ataweza kuona maudhui halisi mara moja badala ya kusubiri scripts.
Kwa kuwa scripts zote zinafanywa baada ya kupitisha HTML, basi wanaweza kufikia DOM yote kwa manipulations yoyote. Mlolongo wa maandiko huokolewa.
Minuses:
Hakuna ukuaji wa uzalishaji kama vile.
Njia-3 [Kutumia sifa ya async]
HTML5 ilianzisha script ya Async, ambayo husaidia kupakua faili za script husika kwa sambamba na mkondo mwingine bila kuathiri uchambuzi wa syntax HTML.
Hata hivyo, script sambamba itachambuliwa na kutekelezwa mara tu itakapomaliza kupakua, bila kujali kama uchambuzi wa syntax wa HTML umekamilika, na utakuwa na kumbukumbu ya kipengele cha DOM kwa hatua hii.
Hapa unaweza kuona wazi kwamba File2.js ilikuwa imefungwa kwenye faili ya HTML. Hata hivyo, wakati browser inapakia faili2, haikuimarisha uchambuzi wa HTML ya syntactic na kwa sababu ya hili, wakati wa utekelezaji wake, alikuwa na kumbukumbu ya nafasi ya HTML kuingia maudhui ya nguvu.
Faida: Kwa kuwa scripts ni kubeba katika mkondo mwingine, uchambuzi wa html syntax hauwezi kusimamishwa, na mtumiaji ataweza kuona maudhui ya haraka badala ya skrini nyeupe tupu. Ongezeko kuu la utendaji, i.e. wakati wa domcontentloaded ulipungua kutoka sekunde 47.68 hadi sekunde 21.12 tu na ~ 55% ongezeko.
Minuses:
Mlolongo wa utekelezaji wa JS hauokolewa. Inafanywa katika utaratibu unaofaa wa boot, na sio kuwezeshwa mlolongo wa scripts ndani ya HTML. Msaada wa kivinjari haukubaliwa kwenye vivinjari vya zamani vya wavuti, yaani, yaani 9 na chini.
Nini kinatokea ikiwa JS imejaa kabla ya kipengele cha DOM kitapatikana? Hitilafu itatupwa nje.
KUMBUKA: Kuweka scripts na sifa ya async chini ya sehemu ya mwili itakuwa njia ya maana na sawa-2.
Njia-4 [Kutumia sifa ya defer]
Tabia ya defer itafanya script kutekeleza tu baada ya kupitishwa kwa HTML kukamilika. Njia moja muhimu sana ya kuzingatia hapa ni kwamba Chrome bado haijasaidia kuchelewa na haiathiri muda wa domcontentloaded. Hata hivyo, hufanya maandiko mwishoni mwa uchambuzi wa syntax ya html.
Faida:
Mlolongo wa maandiko ya kuingiza huhifadhiwa. Kwa hiyo, File3.js inafanywa tu baada ya kupakua na utekelezaji wa faili1 imekamilika, hata kama faili imewekwa mapema.
Msaada wa kivinjari - Ina msaada bora kwa browsers ikilinganishwa na Asyns sifa, i.e. sehemu ya mkono katika IE v6-9
Maandiko yanaweza kufikia DOM, kama inavyofanyika tu baada ya kupitishwa kwa HTML kamili.
Minuses:
Awali, nilifikiri kuwa kuchelewa itakuwa chaguo bora zaidi kuliko asynchrony, lakini baadaye iligundua kuwa Chrome bado haitumii [version 71.0.3578.98] na haiathiri muda wa domcontentloaded.
Hata hivyo, inafanya kazi kama inavyotarajiwa, katika Firefox na uboreshaji mkubwa katika utendaji.
Matokeo.
Ni vyema kuweka vitambulisho vya script katika sehemu ya kichwa na sifa ya async kwa maktaba ya tatu ambayo hutegemea Google Analytics, Google ReCAPTCHA au kitu kingine ambacho hauhitaji upatikanaji wa DOM, kwa kuwa scripts zinazofanana zinapatikana kwa sambamba, lakini zinafanywa mara moja.
Tumia defer kwa scripts nyingine zote zilizopakuliwa katika sehemu ya kichwa, kwa vile pia itapakuliwa kwa sambamba, lakini itafanyika tu baada ya uchambuzi wa html na dom syntax kukamilika tayari kwa upatikanaji / kudanganywa.
Unaweza pia kutumia mchanganyiko wa msikilizaji wa domcontentload ndani ya scripts asynchronous kufanya kazi baadaye. Tafadhali chagua maoni yako na hitimisho katika maoni, na nitafurahi kuzungumza nao.
Mwandishi wa nyenzo hii ni mimi - Pahwanks Yuri. Ninatoa huduma kwa ajili ya mipango ya kuandika katika lugha za Java, C ++, C # (pamoja na kuwashauri) na kuunda maeneo. Ninafanya kazi na maeneo kwenye CMS OpenCart, WordPress, MODX na kujitegemea. Kwa kuongeza, ninafanya kazi moja kwa moja na JavaScript, PHP, CSS, HTML - yaani, naweza kurekebisha tovuti yako au kusaidia na programu ya wavuti.
Scripts zilizounganishwa (JavaScript) huzuia upakiaji wa msimbo wa html. Wakati kivinjari (parser) kinakuja kwenye lebo
Na mifano zifuatazo zinaonyesha jinsi ya kuweka (script ya ndani) ndani ya
Moduli Fallback.
Vivinjari vinavyounga mkono thamani ya moduli kwa sifa ya aina ya kupuuza script yoyote na sifa ya nomodule. Hiyo inakuwezesha kutumia scripts za moduli wakati pia kutoa scripts za kuanguka-kumbukumbu za browsers zisizounga mkono.
Kila mtumiaji wa VK anajua - hapa ni kusubiri sio mawasiliano tu na marafiki na habari ya habari "kwa wakati wote", lakini pia uteuzi wa muziki mkubwa ....
Wale ambao hivi karibuni walinunua iPhone wanaweza kuwa na maswali kuhusu uchunguzi wa mzunguko wa skrini. Lock lock ni muhimu wakati kuangalia video, ...
IPhone X - Tathmini, bei, wapi kununua, picha na sifa
Jinsi ya kwenda kwenye orodha ya kurejesha?
Hitilafu Kuunganisha kwenye seva ya id ya Apple - Jinsi ya kurekebisha kushindwa?
Jinsi iPhone inaunganisha na kompyuta kama modem.
Programu bora ya programu ya simu kwenye mtandao