Încărcare jquery asincronă. Unde se află elementul? Încărcarea asincronă a scriptului HTML5

HTML este conceput astfel încât pagina web să fie încărcată secvenţial linie cu linie, încărcând pe rând toate elementele incluse în codul html. Și dacă unul dintre ele nu este disponibil (de exemplu, JavaScript nu este citit de pe un site extern), atunci încărcarea ulterioară a site-ului se oprește.

Când JS de necitit este în partea de sus a paginii, este posibil ca vizitatorul să nu vadă nimic.

Prin urmare, atunci când utilizați JavaScript de pe site-uri terțe pe site-ul dvs., de exemplu pentru a afișa reclame, este foarte recomandabil să le încărcați asincron. În acest caz, JS terță parte nu va întârzia încărcarea și afișarea site-ului dvs.

Din păcate, nu toate rețelele de publicitate oferă posibilitatea de a descărca scripturi în mod asincron. Prin urmare, în acest articol vă voi spune cum să schimbați codul de încărcare sincronă în asincron. Dacă proprietarul acestui script nu oferă această opțiune.

Încărcare JS sincronă standard

De obicei, apelarea scriptului cu server extern arata cam asa:

Încărcare asincronă script cum face Google/Adsense

Am primit ideea de la Google/Adsense. Pentru ca scriptul să se încarce asincron de restul codului HTML, trebuie să adăugați asincron la codul de apel.

Și acum, pentru ca codul să se încarce asincron, apelul nostru de script de la serverul extern ar trebui să arate astfel:

După cum puteți vedea, totul este simplu. Adevărat, acest lucru va funcționa numai în browserele care acceptă standardul HTML5. La momentul scrierii acestui articol, există o majoritate absolută de astfel de browsere.

Opțiunea propusă nu este 100% universală. Multe scripturi pur și simplu nu mai funcționează după efectuarea acestor modificări. Conform recenziilor de pe Internet, această metodă nu funcționează dacă elementul este utilizat în script document.scrie.

Opțiune fiabilă de încărcare asincronă

Dacă prima opțiune sugerată nu funcționează pentru dvs. Atunci profită următoarele recomandări. Aceasta este în esență încărcare leneșă. Deoarece apelul de script real are loc chiar la sfârșit Pagini HTML, adică atunci când tot conținutul necesar al paginii este deja pe ecran.

În locul de pe pagină în care doriți să afișați rezultatul JavaScript, trebuie să creați un bloc div gol:

Apoi la sfârșitul paginii înainte de închidere eticheta BODY introduceți scriptul pentru încărcarea asincronă:

// JavaScript care trebuie să fie încărcat asincron // mutați-l în poziție reală afișa document.getElementById("script_block_0").appendChild(document.getElementById("script_ad_0"));

// arată document.getElementById("script_ad_0").style.display = "blocare";

Dacă există mai multe blocuri de publicitate, atunci pentru fiecare dintre ele trebuie să repetați totul, creând blocuri DIV individuale unice. Nu uitați să schimbați numele claselor și ID-urile DIV. În exemplul meu, este suficient să schimbați numărul zero, în noul bloc trebuie înlocuit cu 1 și așa mai departe. Această opțiune este mai complexă, dar funcționează peste tot, cu excepția browserelor foarte vechi, cum ar fi Internet Explorer

6. Care, din fericire, practic nu se mai găsește pe computerele utilizatorilor. Acum o să vă povestesc despre intr-un mod interesant

, care vă va ajuta să vă accelerați site-ul WordPress prin încărcarea scripturilor în paralel.

Pentru ce este asta?

Este foarte simplu. Un site web modern este o colecție de o mare varietate de scripturi, etichete, fragmente, stiluri, fonturi și orice altceva. După cum înțelegeți, cu cât sunt mai multe „bunătăți”, cu atât este nevoie de mai mult timp pentru ca site-ul dvs. să se încarce. În ceea ce privește JavaScript, aceasta este o altă chestiune. Ați observat vreodată un astfel de bloc când pagina pare să fi încărcat, dar fila arată că pagina încă se încarcă? Acest lucru se întâmplă atunci când un anumit script nu s-a încărcat până la sfârșit. Ar fi bine, uneori pagina este complet inactivă până când se încarcă același script, aparent nu foarte important. Iar utilizatorii dvs. pot să nu aibă suficientă răbdare. Acest concept

complet opus încărcării sincrone, care este un script obișnuit precum:

Un apel de script asincron arată astfel: Acum, scripturile nu vor obliga utilizatorii să-și aștepte sarcina completa

, totul se va întâmpla în paralel.

Cum să automatizez procesul?

Este clar că dacă conectați manual scripturile și nu sunt multe dintre ele, atunci puteți face acest lucru manual, pur și simplu adăugând atributul corespunzător la codul de apel. Dar cum poți automatiza asta dacă, de exemplu, ai WordPress cu o grămadă de scripturi care, în plus, sunt numite automat?

Găsiți fișierul functions.php deja familiar al temei și introduceți următorul cod acolo (de exemplu, la sfârșit):

// funcția javascript asincronă wcs_defer_javascripts ($url) ( if (FALSE === strpos($url, ".js")) return $url; if (strpos($url, "jquery.js")) return $url; return "$url" async="async" ) add_filter("clean_url", "wcs_defer_javascripts", 11, 1);

Concluzie Ce pot sa adaug in concluzie?, s-ar putea să nu fie potrivit pentru toată lumea, pentru că cine știe ce scripturi ai conectat, așa că instalează-l și experimentează. Nu poate exista niciun dezavantaj la un astfel de script, cu excepția poate incompatibilității cu un anumit site din cauza specificului său. Acesta a fost un alt pas mic spre optimizarea mare a site-ului dvs.

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 se încarcă și se execută. 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ă de încărcare a site-ului Google PageSpeed Insights recomandă eliminarea 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:

- procesarea 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 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

Suportul pentru atributul async a apărut în HTML5, permite browserului să descarce fișiere js în paralel și să le 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), butoane rețelele socialeși așa mai departe.

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

Conectivitatea JavaScript asincronă reduce timpii de încărcare a paginii prin eliminarea latenței. Împreună cu aceasta, recomand comprimarea și îmbinarea fișierelor js într-unul singur, de exemplu, folosind fișierul . Utilizatorilor le plac site-urile rapide 😎

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ă ce este încărcat complet, dar înainte ca obiectul fereastră să fie încărcat. În caz de utilizare defer atribut– scriptul nu va încălca ordinea de execuție a acestuia în raport cu alte script-uri ș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.

Asincron se încarcă javascript script de la Google

După cum știu toți experții, Google plătește o 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

Cea mai bună încărcare javascript asincronă

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 documentul de poziție de afișare reală. getElementById("script_block" ) . appendChild(document. getElementById("script_ad" ) );

// arată documentul. getElementById("script_ad" ) . stil. display = "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. Paginile web moderne sunt foarte încărcate cu fișiere javascript. Acest lucru duce la o încărcare mai lentă și la afișarea ulterioară a paginii. ÎN cele mai proaste conditii

un vizitator al site-ului trebuie să aștepte până la 30 de secunde. Accelerăm se încarcă html

pagini

Utilizarea modernă a JavaScript Paginile web moderne sunt foarte încărcate cu fișiere javascript. Acest lucru duce la o încărcare mai lentă și la afișarea ulterioară a paginii. În cele mai rele condiții (conexiune lentă la internet, multe fișiere javascript

) un vizitator al site-ului trebuie să aștepte până la 30 de secunde.

HTML este conceput în așa fel încât o pagină web se încarcă sincron (linie cu linie) încărcând pe rând toate elementele incluse în codul HTML.

Există o cale de ieșire: plasați liniile Javascript la sfârșitul documentului 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.

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

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

Toate proiectele serioase de astăzi încearcă să treacă la o nouă tehnologie de încărcare cât mai repede posibil. În plus, este absolut ușor.

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

< script defer src= "//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ă ce este încărcat complet, 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.

După cum știu toți experții, Google acordă o atenție deosebită vitezei de încărcare a site-urilor și le reduce pe cele lente în 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= "//extsrcjs.googlecode.com/svn/trunk/extsrc.js" > < script extsrc= "...." >

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

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:

Î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 utilizează cu succes încărcarea accelerată modernă a paginilor web.