Încărcare JavaScript (fără blocarea redării documentului, încărcare asincronă). Conectarea scripturilor asincrone

Există o soluție: puneți șirurile Java la sfârșit document html(prin urmare, acestea vor fi încărcate după desenarea întregii pagini) și numai după aceea conținutul blocurilor va fi afișat în locurile potrivite. Se numește. Toate proiectele serioase de astăzi încearcă să treacă la tehnologie nouă descărcări. În plus, este absolut ușor.

Există mai multe abordări. Voi începe în ordine.

script src= type= "text/javascript" >

Încărcarea asincronă a scriptului HTML5

Standardul HTML5 acceptă capacitatea de a încărca scripturi asincron, ceea ce poate accelera semnificativ timpul total pagina de primire. Doar adăugați asincron sau amânați.

< script async src= "http://www.site.ru/script.js" type= "text/javascript" >

< script defer src= "http://www.site.ru/script.js" type= "text/javascript" >

Care este diferența dintre atributele async și defer?

În ambele cazuri, obținem încărcare asincronă a scripturilor. Singura diferență este momentul în care începe executarea scriptului. Un script cu atributul async va fi executat cât mai curând posibil după el sarcina completa, dar înainte ca obiectul fereastră să fie încărcat. Dacă se folosește atributul defer, scriptul nu va încălca ordinea de execuție a acestuia în raport cu alte scripturi și execuția sa va avea loc după ce pagina este complet încărcată și analizată, dar înainte de evenimentul DOMContentLoaded al obiectului document.

Din păcate, acest mecanism nu funcționează în prezent în toate browserele (în special IE). De asemenea, nu va funcționa dacă există linii document.write în fișierul script.js.

Se încarcă javascript asincron cu script Google

După cum știu toți experții, Google plătește atenție deosebită viteza de încărcare a site-urilor și le reduce pe cele lente rezultatele căutării. Pentru a ajuta, Google a dezvoltat un script special cu care puteți face încărcare asincronă a javascriptului.

Pentru utilizare, pur și simplu înlocuiți

pe

Și conectați fișierul script extsrc.js

Se va dovedi astfel:

< script src= "http://extsrcjs.googlecode.com/svn/trunk/extsrc.js" > < script extsrc= "...." >

Din păcate, această metodă nu funcționează nici pentru fișierele cu document.write

Cel mai bun lucru încărcare asincronă javascript

O metodă universală pentru toate browserele. Funcționează chiar și cu document.write

În locul din pagină în care trebuie să afișăm de fapt elementul nostru, creați un bloc div gol:

< div id= "script_block" class = "script_block" >

La sfârșitul paginii, înainte de a introduce un script pentru încărcarea asincronă a fișierelor:

< div id= "script_ad" class = "script_ad" style= "display:none;" >Iată orice fișier sau script care trebuie încărcat.< script type= "text/javascript" >// mutați-l în poziție reală afiseaza documentul. getElementById("script_block" ) . appendChild(document. getElementById("script_ad" ) );

// arată documentul. getElementById("script_ad" ) . stil. afișare = „blocare” ; În cele mai vechi versiuni de IE (6 și mai jos), încărcarea asincronă nu funcționează, din păcate, dar practic nu mai există astfel de utilizatori. Toate celelalte browsere și servicii folosesc cu succes modernîncărcare accelerată

pagini web. Motivul pentru care am scris această postare a fost că de mai multe ori a trebuit să observ că inserarea codului de buton într-o pagină diverse servicii (de exemplu: VKontakte, Facebook, Twitter, Odnoklassniki) a dus la o încetinire vizibilă a încărcării și afișarii paginii. Este vorba despre despre cazul în care se utilizează conexiunea javascript extern
aceste servicii sociale. Dacă folosim butoane grafice statice simple, nu există probleme, deoarece... Acesta este un minim de grafice și scripturi care sunt localizate local (puteți vedea un exemplu de implementare aici http://pervushin.com/social-button-for-blog.html). Dar vedem doar icoane sociale. servicii, nu există statistici (câți oameni au „apreciat” pagina noastră). Aceste. dacă vrem să vedem statistici, va trebui să conectăm scripturi externe. Și aici merită să rețineți că la câte dintre aceste butoane ne-am conectat, browserul este forțat să descarce atât de multe scripturi externe, adică. Acest conexiuni suplimentare

către servere externe.

Pentru a arăta ce se întâmplă dacă există scripturi în secțiunea de pe pagină, îmi propun să luăm în considerare o serie de exemple de testare. Voi folosi FireFox 3.6 și FireBug.
1) Aşa: Cea mai simplă pagină

cu un fișier de stil, două scripturi și trei imagini:

Și iată diagrama de încărcare a acestuia:
Vă rugăm să rețineți că toate imaginile sunt încărcate numai după ce a fost încărcat cel mai lung fișier javascript. Am făcut destul de intenționatîncărcare lungă

dummy_css.css și dummy_js.js. Sunt doar două fișiere:

dummy_css.php
html,body(
marja:0;
}
umplutura:0;
.img_container(
}

margine:0 auto;lățime:500px;


dummy_js.php

var param=1;

Deci, puteți vedea că fișierul js blochează încărcarea tuturor celorlalte elemente grafice.

2) Totul este aproape la fel, dar dummy_ js. js este încărcat de pe o gazdă externă:

Situația este similară cu cea anterioară:

3) Să încercăm să schimbăm fișierele css și js din secțiunea head (css vine acum după js):

Să ne uităm la diagrama de încărcare:

Js încă blochează încărcarea imaginilor, indiferent de ce gazdă este încărcată.

5) Un alt caz interesant: css este situat înainte de js, dar css durează mai mult să se încarce

Aici css-ul blochează deja încărcarea imaginilor...

6) Mutați un js înăuntru< body>

Se vede că dummy_ js. js blochează încărcarea doar a celei de-a treia imagini, care se află în codul html după ea. Dar dacă CSS durează mai mult să se încarce, atunci va bloca încărcarea graficelor. Nu este greu de imaginat că conectarea la scripturi externe poate încetini foarte mult încărcarea și redarea paginii, mai ales dacă server la distanță

Din anumite motive, este nevoie de mult timp pentru a răspunde.

Plasarea scripturilor externe înainte Ceea ce sugerează imediat... Toate scripturile a căror încărcare nu este critică pentru pagină ar trebui plasate chiar înaintea etichetei de închidere. Dar acest lucru se poate face pentru acele scripturi în care toată logica este internă și nu există apeluri externe de la cod html

. Dacă, din codul html, unele funcții sunt apelate din scripturi care nu au fost încă încărcate, atunci astfel de situații trebuie tratate într-un mod special, deoarece trebuie să urmăriți descărcarea.

Dar mai este o problemă, permiteți-mi să vă explic cu un exemplu:
$("img").click(function() (
});
});

alert($(this).attr("src");

Dacă js înainte durează mult timp să se încarce, atunci făcând clic pe imagini până când acest script este încărcat complet nu va duce la nimic, deoarece $(document).ready() va funcționa numai după ce js este încărcat complet. Deci, dacă există o logică pe pagini care implică procesarea evenimentelor, atunci această metodă nu este potrivită.

Deci, ceea ce este necesar este o modalitate de a încărca scripturile fără blocare...

Creați async.js:


script.src = "dummy_js.js";

si conecteaza-l:
Dar mai este o problemă, permiteți-mi să vă explic cu un exemplu:
$("img").click(function() (
});
});

$(document).ready(funcție() (

Dacă apelul async.js este plasat în , și nu înainte de , atunci diagrama va arăta astfel:

Dar dacă este încă mai convenabil să plasați async.js în cod, atunci ar trebui să modificați ușor conținutul async.js:
$(document).ready(funcție() (
var script = document.createElement("script");
script.src = "dummy_js.js";
}
);

document.getElementsByTagName(„cap”) .appendChild(script); Deci, problema încărcării asincrone a fost rezolvată, dar problema sincronizării încărcării scripturilor externe și a codului care le folosește rămâne deschisă. Să luăm în considerare acest lucru în practică, conectarea butoanelor.

rețelele sociale

Asincronia în javascript este o regulă conform căreia blocurile de cod JS sunt procesate de browser în paralel cu încărcarea DOM - i.e. structura paginii web sau după ce DOM-ul s-a încărcat.

De obicei, JS este plasat la sfârșitul paginii tocmai pentru motivul necesar anumit timp- încărcarea paginii este suspendată - DOM-ul nu se poate încărca deoarece așteaptă finalizarea execuției scriptului javascript.

Dacă scriptul este scris cu erori sau este încărcat de la server extern, care s-a dovedit a fi indisponibil - pagina nu se va încărca niciodată. Dacă codul JS este pur și simplu prost optimizat și durează mult timp pentru a se executa, pagina se va încărca până la punctul în care scriptul este conectat - apoi încărcarea se va opri până la finalizarea scriptului. Acest lucru poate fi observat de vizitatorul site-ului, mai ales dacă folosește o conexiune lentă la Internet.

Cel mai adesea, un vizitator al unui site a cărui pagină a încetat să se încarce la jumătatea drumului va pleca fără să aștepte ca scriptul să termine de funcționare. Prin urmare, întârzierile sunt extrem de nedorite.

Pentru a remedia această situație, este furnizată opțiunea asincronă, care vă permite să încărcați JS asincron. Structura documentului atunci când se utilizează documentul și toate elementele paginii nu vor aștepta ca scriptul să se finalizeze execuția.

Scriptul este inițiat, pagina va continua să se încarce chiar dacă scriptul nu și-a încheiat activitatea. Este posibil ca unele funcționalități ale paginii să nu funcționeze corect (dacă există erori în javascript), dar în general pagina se încarcă și vizitatorul site-ului poate lucra cu ea.

Este de remarcat faptul că asincronul nu este acceptat de unii versiuni de internet Explorer, dar din moment ce un număr foarte mic de utilizatori îl folosesc, de obicei are sens să ignori acest lucru și să folosești asincronia în javascript.

O alternativă la asincron ar putea fi amânarea. Când se utilizează a acestui atribut scriptul va fi executat numai după ce DOM-ul este încărcat. Directiva este acceptată de toate browserele. Particularitatea sa este că procesează scripturile JS în ordinea în care sunt conectate.

Acest lucru poate fi atât un plus, cât și un minus. Dacă ordinea în care sunt executate scripturile este importantă, amânarea este cea mai bună soluție, care poate fi dezactivată forțat: script.async=false;

Dezavantajul este că, dacă un script este conectat de la o resursă externă care este inaccesibilă, celelalte scripturi nu vor funcționa. Ei îl vor aștepta pe acesta, indiferent cât de important este în general.

Salutări, prieteni! Știați că încărcarea JavaScript este una dintre cele mai multe blocajeleîn performanța site-ului? Astăzi sarcina mea principală este să explic ce este un script și cum afectează acesta viteza și performanța site-ului.

Un browser care încarcă o etichetă de script oprește redarea paginii până când scriptul este încărcat și executat. Pagina este blocată, iar browserul nu răspunde la acțiunile utilizatorului timp de câteva secunde. Timpul de întârziere depinde de mai mulți factori:

• configuratii,
• viteza conexiunii la internet,
• dimensiunea fișierului și altele...

Din acest motiv, analizatorul de viteză a site-ului web Google PageSpeed ​​​​Insights recomandă eliminarea din partea de sus a paginii Cod JavaScript, blocându-și afișarea. O bună practică este să plasați scripturi în partea de jos a site-ului, de exemplu înainte de eticheta de închidere sau să configurați încărcarea asincronă.

Dacă codul de script afectează afișarea părții superioare a site-ului, nu îl plasați dosar separat, și încorporați direct în HTML.

JS poate modifica conținutul site-ului și chiar poate redirecționa către o adresă URL diferită. În acest caz, conectarea scriptului de la sfârșitul documentului va duce la efectul de „smucire” a paginii, de încărcare noi sau de modificare a elementelor existente în partea de sus.

Aplicarea atributelor async și defer la eticheta de script

Să ne dăm seama ce sunt asincrone și amânate Funcționează JavaScriptși care este diferența fundamentală dintre atributele async și defer. Dar mai întâi, să ne uităm la secvența procesării documentelor când conexiune normală eticheta de script.

1	< src = "example.js" >

Pentru un exemplu vizual voi folosi următoarele simboluri:

- prelucrarea paginii
— încărcarea scriptului
- execuția scriptului

Astfel, secvența de procesare are loc conform următoarei scheme:

Analiza codului HTML este întreruptă în timp ce scriptul se încarcă și se execută, după care continuă. Există o întârziere în afișarea paginii web.

defer atribut

Atributul defer permite browserului să înceapă descărcarea fișierelor js în paralel fără a opri procesarea ulterioară a paginii. Ele sunt executate după analiză completă model de obiect document (din engleză Document Object Model, prescurtat DOM), în timp ce browserul garantează consistența în funcție de ordinea în care sunt conectate fișierele.

1	< defer src = "example.js" >

atribut asincron

Sprijin atribut asincron apărut în HTML5, permite browserului să descarce fișiere js în paralel și să se execute imediat după descărcare, fără a aștepta ca restul paginii să fie procesat.

1	< async src = "example.js" >

Diagrama secvenței de procesare:

Aceasta este o descărcare asincronă. Acest atribut este recomandat pentru utilizare în scripturi care nu au un impact semnificativ asupra afișajului documentului. Acestea includ contoare de colectare a statisticilor ( Google Analytics, Yandex Metrica), coduri de rețea de publicitate ( Rețeaua de publicitate Yandex, Google AdSense), butoanele rețelelor sociale și așa mai departe.

Viteza de încărcare a site-ului este unul dintre factorii de clasare în Google.

Asincron Conexiune JavaScript Reduce timpul de încărcare a paginii datorită absenței întârzierii. Împreună cu aceasta, recomand comprimarea și îmbinarea fișierelor js într-unul singur, de exemplu, folosind fișierul . Utilizatorilor le plac site-urile rapide 😎