Ngarkimi asinkron i JavaScript. Ngarkimi i JavaScript (pa bllokuar paraqitjen e dokumentit, ngarkim asinkron)

30.07.2019 Në kontakt me

Arsyeja për të shkruar këtë postim ishte se më shumë se një herë më është dashur të vërej se futja e kodit të butonave të shërbimeve të ndryshme (për shembull: vkontakte, facebook, twitter, shokët e klasës) në faqe çoi në një ngadalësim të dukshëm në ngarkimin dhe shfaqjen e faqes . Fjala është për rastin kur përdoret lidhja e jashtme javascript e këtyre shërbimeve sociale.
Nëse përdorim butona të thjeshtë grafikë statikë, nuk ka probleme, sepse. ky është një minimum grafikësh dhe skriptesh që ndodhen në nivel lokal (mund të shihni një shembull zbatimi këtu http://pervushin.com/social-button-for-blog.html). Por ne shohim vetëm ikona sociale. shërbime, nuk ka statistika (sa "pëlqime" ka faqja jonë). ato. nëse duam të shohim statistika, do të duhet të lidhim skriptet e jashtme. Dhe këtu duhet pasur parasysh se sa nga këta butona kemi lidhur, shfletuesi duhet të shkarkojë kaq shumë skripta të jashtëm, d.m.th. këto janë lidhje shtesë me serverë të jashtëm.

Për të treguar se çfarë ndodh nëse faqja ka skripta në seksion , Unë propozoj të shqyrtojmë një numër rastesh testimi. Unë do të përdor FireFox 3.6 dhe FireBug.

Kështu që:
1) Faqja më e thjeshtë me një skedar stili, dy skripta dhe tre fotografi:

Dhe këtu është diagrami i shkarkimit për të:

Ju lutemi vini re se të gjitha imazhet ngarkohen vetëm pas ngarkimit të skedarit "më të gjatë" javascript.
E bëra me dashje ngarkimin e dummy_css.css dhe dummy_js.js mjaft të gjatë. Janë vetëm dy skedarë:

dummy_css.php
gjumë (2);
?>
html, trupi(
marzhi: 0;
mbushje: 0;
}
.img_container(
marzhi: 0 automatik; gjerësia: 500 px;
}

dummy_js.php
gjumë (3); ?> varparam=1;

Pra, është e qartë seSkedari js bllokon ngarkimin e të gjitha grafikëve të tjera.

2) Gjithçka është pothuajse e njëjtë, porbedel_js.js ngarkohet nga një host i jashtëm:

Situata është e ngjashme me atë të mëparshme:

3) Le të përpiqemi të ndryshojmë në seksionkokë në vendecss dheskedarë js (css tani vjen pasjs):

Le të shohim diagramin e ngarkimit:

js ende bllokon ngarkimin e imazheve, pa marrë parasysh se nga cili host është ngarkuar.

4) Rritni kohën e ngarkimitcss deri në 4 sekonda (kodi html si në rastinN3):

5) Një rast tjetër interesant:css është më parëjs, porcss kërkon më shumë kohë për t'u ngarkuar






css po bllokon imazhet nga ngarkimi...
6) Ne transferojmë njëjs brenda<
trup>















Është e qartë sebedel_js.js bllokon duke ngarkuar vetëm imazhin e tretë, i cili ndodhet nëkodi html pas tij.  Por nësecss kërkon më shumë kohë për t'u ngarkuar, atëherë do të bllokojë ngarkimin e grafikëve. Nuk është e vështirë të imagjinohet që skriptet e jashtme që janë të lidhura mund të ngadalësojnë shumë ngarkimin dhe paraqitjen e faqes, veçanërisht nëse serveri në distancë kërkon shumë kohë për t'u përgjigjur për ndonjë arsye.
Vendosja e skripteve të jashtme përparatrupi>
Ajo që sugjeron menjëherë veten ... Të gjitha skriptet, ngarkimi i të cilave nuk është kritik për faqen, duhet të hiqen menjëherë përpara etiketës mbyllëse.  Por kjo mund të bëhet për ato skripta në të cilat e gjithë logjika është brenda dhe nuk ka thirrje të jashtme nga kodi html.  Nëse disa funksione thirren nga kodi html nga skriptet që ende nuk janë ngarkuar, atëherë situata të tilla duhet të trajtohen në mënyrë të veçantë, sepse.  shkarkimi duhet të gjurmohet.
Por ka një problem tjetër, unë do ta shpjegoj me një shembull:


 





Nëse js më parë do të duhet një kohë e gjatë për t'u ngarkuar, atëherë klikimi në foto derisa ky skript të ngarkohet plotësisht nuk do të çojë në asgjë, sepse  $(document).ready() do të funksionojë vetëm pasi js të jetë ngarkuar plotësisht.  Pra, nëse faqet kanë një lloj logjike që parashikon trajtimin e ngjarjeve, atëherë kjo metodë nuk është e përshtatshme.
Pra, çfarë nevoje për një mënyrë jo bllokues po ngarkon skriptet...
Krijo async.js:


script.src = "dummy_js.js"; 


dhe lidheni atë:









 



 

Nëse thirrja për async.js vendoset në, jo më parë, atëherë grafiku duket si ky: 
Por nëse në kod është akoma më i përshtatshëm për të vendosur async.js saktësisht në , atëherë duhet të ndryshoni pak përmbajtjen e async.js: 

$(document).ready(function() ( 
varscript = dokument.createElement("script"); 
script.src = "dummy_js.js"; 
dokument.getElementsByTagName("koka") .appendChild(script); 
} 
);
Pra, çështja e ngarkimit asinkron është zgjidhur, por çështja e sinkronizimit të ngarkimit të skripteve të jashtme dhe kodit që i përdor ato mbetet e hapur.  Le ta konsiderojmë atë në praktikë, duke lidhur butonat e rrjeteve sociale.
) Kam shkruar për efektin që kanë skedarët JavaScript në Rrugën e Renderimit Kritik (CRP).

JavaScript është një burim bllokues për analizuesin.  Kjo do të thotë se JavaScript bllokon analizimin e vetë dokumentit HTML.  Kur analizuesi arrin etiketën ‹script› (nuk ka rëndësi nëse është i brendshëm apo i jashtëm), ai ndalon, kap skedarin (nëse është i jashtëm) dhe e ekzekuton atë.
Kjo sjellje mund të jetë problematike nëse ngarkojmë skedarë të shumtë JavaScript në faqe, pasi rrit kohën e paraqitjes së parë, edhe nëse dokumenti në fakt nuk varet nga ato skedarë.

Për fat të mirë, elementi
 
Një thirrje asinkrone e skriptit duket kështu:
 
 
 Tani skriptet nuk do t'i detyrojnë përdoruesit tuaj të presin shkarkimin e tyre të plotë, gjithçka do të funksionojë paralelisht.
 Si të automatizoni procesin?
 Sigurisht, nëse i lidhni skriptet me dorë dhe nuk ka shumë prej tyre, atëherë mund ta bëni këtë manualisht thjesht duke shtuar atributin e duhur në kodin e thirrjes.  Por si ta automatizoni këtë biznes nëse, për shembull, keni WordPress me një mori skriptesh, të cilat, përveç kësaj, quhen automatikisht?
 Ne gjejmë një skedar tashmë të njohur për ne funksionet.php temën tuaj dhe ngjitni aty (për shembull në fund) kodin e mëposhtëm:
// funksioni javascript asinkron wcs_defer_javascripts ($url) (nëse (FALSE === strpos($url, ".js")) kthen $url; nëse (strpos($url, "jquery.js")) kthen $url; kthe "$url" async="async"; ) add_filter("clean_url", "wcs_defer_javascripts", 11, 1);
konkluzioni
 Çfarë mund të shtohet në përfundim.  Ky skenar mund të mos jetë i përshtatshëm për të gjithë, sepse kush e di se çfarë skriptesh janë të lidhura saktësisht me ju, prandaj instaloni dhe eksperimentoni.  Një skenar i tillë nuk mund të ketë një minus, përveç ndoshta papajtueshmërisë me një sit specifik për shkak të specifikave të tij.  Ishte një tjetër hap i vogël drejt një optimizimi të madh të faqes suaj.
Ekziston një rrugëdalje: vendosni vargjet Java 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ë një teknologji të re boot sa më shpejt të jetë e mundur.  Për më tepër, është absolutisht e lehtë.
Ka disa qasje.  Do të filloj me radhë.
skript src=type="text/javascript">

Ngarkimi asinkron i skriptit HTML5
Standardi HTML5 mbështet aftësinë për të ngarkuar skriptet në mënyrë asinkrone, gjë që mund të përshpejtojë ndjeshëm kohën e përgjithshme të tërheqjes së faqes.  Thjesht shtoni asinkron ose shtyj.
<
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 asinkronike dhe shtyrjes
Në të dyja rastet, marrim ngarkim asinkron të skripteve.  Dallimi është vetëm në momentin kur skripti fillon të ekzekutohet.  Skript me atribut asinkron do të ekzekutohet sa më shpejt që të jetë e mundur pasi të jetë ngarkuar plotësisht, por para se të ngarkohet objekti i dritares.  Në rast të përdorimit të atributit shtyj– Skripti nuk do të thyejë 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 sot në të gjithë shfletuesit (veçanërisht IE).  Gjithashtu nuk do të funksionojë nëse skedari skript.js ka linja dokument.shkruaj.
Ngarkimi asinkron i javascript nga një skript nga Google
Siç e dinë të gjithë mjeshtrit, Google i kushton vëmendje të veçantë shpejtësisë së ngarkimit të faqeve dhe ul ato të ngadalta në rezultatet e kërkimit.  Për të ndihmuar, Google ka zhvilluar një skrip të veçantë që mund të përdoret për të ngarkuar javascript në mënyrë asinkrone.
Për ta përdorur, thjesht zëvendësoni 


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 në internet.
Asinkronia në javascript është një rregull sipas të cilit blloqet e kodit JS përpunohen nga shfletuesi paralelisht me ngarkimin e DOM - d.m.th.  struktura e faqes në internet ose pasi të jetë ngarkuar DOM. 


Kodi JS dihet se vendoset midis etiketave.  Në këtë rast, kodi mund të përmbahet në KOKË dokument, si dhe TRUPI- në të njëjtën kohë në çdo pjesë të dokumentit.  Gjithashtu javascript mund të ngarkohet nga fusha të tjera.
Zakonisht JS vendoset në fund të faqes pikërisht për arsyet se kërkon një kohë të caktuar për të përpunuar kodin - ngarkimi i faqes është pezulluar - DOM nuk mund të ngarkohet sepse është në pritje të përfundimit të skriptit javascript.
Nëse në të njëjtën kohë skripti shkruhet me gabime ose ngarkohet nga një server i jashtëm që doli të mos ishte i disponueshëm, faqja nuk do të ngarkohet kurrë.  Nëse kodi JS është thjesht i optimizuar dobët dhe kërkon shumë kohë - faqja do të ngarkohet në vendin ku është lidhur skripti - atëherë shkarkimi do të ndalet derisa të përfundojë ekzekutimi i skriptit.  Kjo mund të vërehet nga vizitori i faqes, veçanërisht nëse ata përdorin një lidhje të ngadaltë interneti.
Më shpesh, një vizitor nga një sit, faqja e të cilit ka ndaluar së ngarkuari përgjysmë do të largohet pa pritur që skenari të funksionojë deri në fund.  Prandaj, vonesat janë shumë të padëshirueshme.
Për të korrigjuar këtë situatë, ekziston një mundësi asinkron, duke ju lejuar të ngarkoni JS në mënyrë asinkrone.  Struktura e dokumentit kur përdoret dokumenti dhe të gjithë elementët e faqes nuk do të presë për përfundimin e ekzekutimit të skriptit.
Skripti është inicuar, faqja do të vazhdojë të ngarkohet edhe nëse skripti nuk e ka përfunduar punën e tij.  Në të njëjtën kohë, disa funksione të faqes mund të mos funksionojnë siç duhet (nëse bëhen gabime në javascript) - në përgjithësi, faqja është e ngarkuar dhe vizitori i faqes mund të punojë me të.

Vlen të përmendet se asinkronizimi nuk mbështetet nga disa versione të Internet Explorer, por meqenëse shumë pak përdorues e përdorin atë, zakonisht ka kuptim ta shpërfillni këtë dhe të përdorni asinkronizim në javascript.
Një alternativë ndaj asinkronizimit mund të jetë shtyj.  Kur përdorni këtë atribut, skripti do të ekzekutohet vetëm pasi të jetë ngarkuar DOM.  Direktiva mbështetet nga të gjithë shfletuesit, veçoria e saj është se përpunon skriptet JS në rendin në të cilin janë lidhur.
Kjo mund të jetë një plus dhe një minus.  Nëse rendi i ekzekutimit të skripteve është thelbësor - shtyj- zgjidhja më e mirë. asinkronizimi mund të detyrohet të çaktivizohet: script.async=false;
E keqja është se nëse një skript lidhet nga një burim i jashtëm që nuk është i disponueshëm, pjesa tjetër e skripteve nuk do të funksionojë.  Ata do ta presin me padurim këtë, pavarësisht se sa e rëndësishme është në përgjithësi.