Asinkrono učitavanje JavaScripta. Povezivanje asinhronih skripti

Ponekad postoji potreba za asinhronim učitavanjem podataka korak po korak. A može biti bilo šta. Počevši od učitavanja zavisnih direktorija (na primjer, država -> gradovi), završavajući kombiniranjem i obradom informacija iz različitih izvora (na primjer, koristite nekoliko različitih servisa, a svaki od njih troši različito vrijeme na generiranje podataka).

A sada malo jednostavnije.

Problemi sa postupnim asinhronim učitavanjem podataka u jQuery (ajax)

Ako trebate povezati više ajax zahtjeva u jQueryju, najlakše rješenje je da pozovete sljedeću funkciju na kraju svakog uspješnog rukovatelja. Ovo ne samo da je prilično jednostavno, već i ne uzrokuje nikakve probleme. Na primjer,

// Prvi zahtjev $.ajax(url, ( ... uspjeh: funkcija (rezultat) ( // Neki kod... // Pozivanje sljedećeg rukovaoca nextLoader(); ) ));

Sada, recimo da ste suočeni sa malo težim zadatkom. Na primjer, trebate pokrenuti funkciju tek nakon što se nekoliko asinhronih zahtjeva završi (na primjer, dobivanje oblačića za web lokaciju). Naravno, mogu se povezati i u ravni lanac, kao što je prikazano gore. Ali, u isto vrijeme, sama suština asinhronije počinje da se gubi. A također se može ispostaviti da gradite ovisnost između potpuno nepovezanih blokova. Slažete se da TCI indikator i whois podaci nisu u potpunosti ovisni jedan o drugom.

Ipak, unatoč svim suptilnostima, takav se problem može riješiti prilično brzo, iako malo nespretno.

Ali šta ćete učiniti ako se vaš zadatak pokaže još težim? Kada trebate rasporediti sve operacije i učitavanje podataka u faze. Na primjer, kreirate predložak dijaloga. Prva faza će uključivati ​​dobijanje podataka za sva polja (padajuće liste, grupe polja za potvrdu itd.). U drugoj fazi biće definisani rukovaoci za kreirana polja. A u trećoj fazi, nakon što se sve potpuno učita, otvorite pristup raznim dugmadima i drugim elementima interfejsa (kako vam razigrane ruke ne bi stvarale mnogo problema). Čisto vizuelno to bi moglo izgledati ovako:

Slažete se da organiziranje poziva svih funkcija u jednom lancu ne samo da nije lak zadatak, već i nije baš ugodan. Osim toga, zamislite da trebate dodati nekoliko polja i razne rukovaoce. Šta će se desiti? Glava će vam početi da ključa od traženja pravih mesta „gde da ubacite“. Ovdje vam je već potrebna neka vrsta mehanizma koji će vam omogućiti da organizirate sva lansiranja u fazama.

Pišemo skriptu za organizaciju asinhronog učitavanja korak po korak u jQueryju

Prvi korak je odlučiti se na potpuno logično pitanje „zašto ne koristiti gotove biblioteke?“ Kao takvo, nema odgovora na ovo pitanje. Sve jako zavisi od zadatka. Budući da riječ "biblioteka" obično znači:

• nedostatak kontrole koda (ne možete promijeniti internu logiku biblioteke; a ako to učinite, onda bi se svaka promjena mogla vratiti da vas proganja u budućnosti)
• potreba za proučavanjem njegovih osnovnih svojstava i principa (obično se to svodi na čitanje sve moguće dokumentacije i hrpu različitih testova)
• ograničenja na jQuery verzije (ako se koriste složeni mehanizmi kernela, tada je moguće povezivanje s verzijom jQuery biblioteka)
• mogući problemi u kompatibilnosti s drugim skriptama (daleko je od sigurnog da će se biblioteka ispravno ponašati s drugim bibliotekama)
• pretjerano bogatstvo funkcionalnosti, a kao rezultat i prisutnost "dodatnih ograničenja"
• itd.

Napomena: Nemojte se zavaravati, jer biblioteke imaju ogroman broj prednosti. Ako se sećate, jQuery je ista biblioteka. Članak se fokusira na rizike i dodatno ulaganje vremena koje može biti potrebno od vas.

Zato prvo morate odlučiti o svojim zadacima (broj, učestalost pojavljivanja), vremenu (koliko ste spremni potrošiti na rješavanje problema), šta ste spremni žrtvovati (da li je mogućnost da brzo ispravite nešto što vam je važno ; da li je važna veličina biblioteka; koliko? ograničenja vam odgovaraju), preferencije (na primjer, u osnovi ne koristite biblioteke). I tek nakon što odgovorite na ova pitanja, pokušajte odgovoriti na pitanje "zašto se isplati ili ne isplati koristiti gotove biblioteke?"

Ako ste sami sebi odgovorili da želite koristiti biblioteke, onda, kao opciju, možete preuzeti gotov primjer testiranja sa gotovom skriptom na kraju članka.

Ako ste puni entuzijazma i odlučnosti, prelazimo na dalje akcije.

Sastavljanje zahtjeva za skriptu

Prije implementacije bilo čega potrebno je sastaviti male zahtjeve kako se ne bi zaobišli tokom implementacije. Rezultat je ovakva lista:

• Povezivanje i podešavanje skripte trebalo bi da se desi automatski (treba samo da povežete js fajl)
• Ponovno povezivanje datoteke skripte ne bi trebalo uzrokovati pad
• Koristite samo standardne jQuery mehanizme
• Interfejs bi trebao biti jednostavan i razumljiv
• Možete kreirati nekoliko nezavisnih lanaca faza
• Uvijek biste trebali biti u mogućnosti brzo prilagoditi radnje skripte
• Skripta ne bi trebala nametati složena ograničenja vašem kodu (maksimalno - potreba za dodavanjem funkcije obavještavanja o njegovom izvršavanju)

Napomena: Uvek formulišite zahteve tako da tokom implementacije ne počnete da radite nešto što uopšte nije potrebno. I budite sigurni da u njega uključite "tako jasne" tačke, tako da te tačke i dalje ostanu "tako jasne".

Izrada probnog projekta

Struktura projekta će izgledati ovako:

• css - direktorij sa stilovima
  • template.css - testiranje stilova projekta
• slike - katalog sa slikama (za vizuelni efekat)
  • ajax-loader.gif - učitavanje slike
• js - direktorij sa skriptama
  • jquery-ajax-stage.js - skripta za postupno učitavanje
• data.json - podaci testa
• index.html - početna stranica

Napomena: Kada kreirate strukturu probnog projekta, pokušajte da je što više približite strukturi stvarnog projekta. Ovo će vam pomoći da uhvatite probleme vezane za strukturu tokom razvoja.

Fajl sa testnim podacima - data.json

Ovaj fajl je potreban samo da bi se osiguralo da učitavanje podataka preko ajaxa neće uticati ni na šta. Možete ga ispuniti bilo kojim jsonom. Na primjer, ovako:

(podaci: "Mnogo podataka")

Napomena: Pokušajte učiniti da testni slučajevi budu što sličniji stvarnim. Čak i ako su pozivi funkcija besmisleni.

Datoteka stila - template.css

Ova datoteka je potrebna samo za prikaz svih stilova zasebno. Pošto stilovi nemaju nikakve veze sa razvojem samog scenarija. Da, i to se samo smatra dobrom praksom. Sami stilovi:

Left-table (float: lijevo; padding-right: 10px; ) .right-table (float: lijevo; padding-right: 10px; ) table.table-loader ( border-spacing: 0px; border-collapse: kolaps; širina : 300px; ) table.table-loader tr td ( padding: 5px; granica: 1px solid #ccc; )

Datoteka skripte za postupno asinkrono učitavanje - jquery-ajax-stage.js

Implementacija samog asinhronog učitavanja korak po korak.

(funkcija (parentObject) ( // Zaštita od ponovne definicije if(parentObject.eventManager) return; // Definiraj objekt parentObject.eventManager = ( // Dodaj fazu addStage: function (el, stageName) ( var elCount = $( el). length; // Provjerite ispravnost parametara if(elCount > 0 && !!stageName) ( // Takva faza već postoji ako (($(el).get(0).eventStages = $(el)) .get(0).eventStages || ())) return; // Definiraj "nfg $(el).get(0).eventStages = ( waiterCount: 0, // Brojač objekata u stanju čekanja podataka onEvent: / / sve funkcije će biti pohranjene u ovom nizu za pozivanje ); ) ), // Uklonite fazu removeStage: function (el, stageName) ( var elCount = $(el).length; // Provjerite ispravnost parametara if( elCount > 0 && !!stageName) ( // Takva faza je pronađena ako (($(el).get(0).eventStages = $(el).get(0).eventStages || ())) ( izbriši ( $(el).get(0).eventStages = $( el).get(0).eventStages || ()); ($(el).get(0).eventStages = $(el).get(0 ).eventStages || ()) = null; ) ) ), // Povećava brojač izvršenih funkcija za fazu addStageWaiter: function (el, stageName) ( var elCount = $(el).length, stage = ($(el).get(0).eventStages = $ (el) .get(0).eventStages || ()); // Provjerite ispravnost parametara if(elCount > 0 && !!stageName && stage) ( // Povećajte brojač opterećenja stage.waiterCount++; ) ), // Smanjenje brojača izvršenih funkcija za pozornicu // Tj. obavijestiti da je funkcija izvršena removeStageWaiter: funkcija (el, stageName) ( var elCount = $(el).length, stage = ($(el).get(0).eventStages = $(el).get(0) .eventStages || ()); // Provjera ispravnosti parametara if(elCount > 0 && !!stageName && stage) ( // Smanjenje brojača opterećenja stage.waiterCount--; // Provjerite stanje faze u ovom .checkStage(el, stageName); ) ), // Provjerite stanje faze checkStage: funkcija (el, stageName) ( var elCount = $(el).length, stage = ($(el).get(0) .eventStages = $(el).get(0) .eventStages || ()); // Provjerite ispravnost parametara if(elCount > 0 && !!stageName && stage) ( if (stage.waiterCount 0) ( / / FIFO red - prvi ulazi, prvi izlazi, kao u spremištu pozornice. onEvent.shift())(; ) ) ) ), // Dodajte poziv funkcije koji će se pokrenuti kada se izvrši cijela faza onLoadStage: funkcija (el, stageName, funcHandler) ( var elCount = $(el).length, stage = ($ (el).get(0).eventStages = $(el).get(0).eventStages || ()); // Provjerite parametri su ispravni if(elCount > 0 && !!stageName && stage && typeof (funcHandler) = == "function") ( // Dodavanje rukovaoca stage.onEvent.push(funcHandler); // Provjera stanja pozornice this.checkStage(el, stageName); ) ) ); ))(prozor);

Test stranica - index.html

Ispostavilo se da je testna stranica prilično velika (oko 160 redova), tako da će biti dat samo dio koda. Uvijek možete pronaći punu verziju datoteke u zip arhivi.

Uključujemo sve potrebne fajlove:

Kreirajmo nekoliko testnih blokova. Blok uključuje dugme za pokretanje i tabelu u koju će se podaci bilježiti korak po korak.

Započnite preuzimanje

Definirajmo funkciju koja će kreirati test funkcije za faze:

funkcija getFakeLoader(storage, currStage, startDate, selektor) ( return function () ( setTimeout(function () ( $.ajax("data.json?callback=?", contentType: "text/plain; charset=utf-8) ", dataType: "jsonp", jsonpCallback: funkcija (rezultat) ( $(selector).html("Vrijeme od početka: " + ((+novi datum() - datum početka)/1000.0).toFixed(2) + " sekundi "); // Upiši vrijeme učitavanja window.eventManager.removeStageWaiter(storage, currStage); // Smanji brojač ) )); ), Math.random() * (3000) + 1000 // Kašnjenje od 1 do 4 sekunde ); ); )

Kreiramo funkciju koja će opisati logiku za svaki test blok:

function formTestFor(selector) ( $(selector + " .start-process").click(function () ( var startDate = new Date(); // Za ljepotu, dodajte slike setLoaderImgs(selector); // Definirajte prozor faza .eventManager .addStage($(selektor + " .table-loader"), "1"); window.eventManager.addStage($(selector + " .table-loader"), "2"); window.eventManager.addStage ($ (selektor + " .table-loader"), "3"); // Blokiraj dugme do kraja faze $(selector + " .start-process").attr("disabled", "disabled") ); // Popuni red čekajući 3 učitavanja po fazi // Zapravo, ove radnje bi se trebale dogoditi na mjestima gdje su funkcije faze pokrenute window.eventManager.addStageWaiter($(selector + " .table-loader"), "1 "); ... window.eventManager.addStageWaiter ($(selector + " .table-loader"), "3"); // Kreirajmo sada funkcije učitavanja obrnutim redoslijedom (radi jasnoće) // Zapravo, ove akcije treba da se dese na mestima gde su funkcije definisane window.eventManager.onLoadStage($ (selektor + " .table-loader"), "2", getFakeLoader($(selector + " .table-loader"), "3" , datum početka, selektor + " .row-3 .td-1")); ... window.eventManager.onLoadStage($(selektor + " .table-loader"), "1", getFakeLoader($(selektor + " .table-loader"), "2", datum početka, selektor + " .red -2 .td-3")); // Dodajte regularni tekstualni izlaz gotovih faza window.eventManager.onLoadStage($(selector + " .table-loader"), "1", function () ( $(selector + " .row-1-end td") ).html ("Prva faza je završila u " + ((+novi datum() - startDate)/1000.0).toFixed(2) + " sekundi. Sljedeća faza počinje."); )); ... window.eventManager.onLoadStage($(selektor + " .table-loader"), "3", funkcija () ( $(selektor + " .row-3-end td").html("Treća faza je završio za " + ((+novi datum() - datum početka)/1000.0).toFixed(2) + " sekundi.
Učitavanje je završeno"); )); // Nakon što je treća faza završena, otključajte dugme onLoadStage window.eventManager.onLoadStage($(selector + " .table-loader"), "3", function () ( // Otključajte dugme $(selector + ".start-process").attr("disabled", null); )); // Sada pokrenite funkcije prve faze getFakeLoader($(selector + ".table-loader") , "1", datum početka, selektor + " .row-1 .td-1")(); getFakeLoader($(selector + " .table-loader"), "1", datum početka, selektor + " .row-1 .td-2")(); getFakeLoader($(selektor + " .table-loader"), "1", datum početka, selektor + " .row-1 .td-3")(); // Posmatrajte.. . )); )

Sada prikupljamo sve datoteke u projekat i prelazimo na početno testiranje i demonstraciju.

Da vidimo rezultat

Otvorite datoteku index.html u pretraživaču. Trebalo bi da se prikaže sledeći interfejs:

Kao što vidite, imamo na raspolaganju dva dugmeta za pokretanje paralelnih procesa. Nakon što kliknete na njih, preuzimanje za odgovarajuće blokove treba započeti. I to će izgledati otprilike ovako:

Nakon što oba procesa završe svoje izvršenje, pogledajte vrijeme i uvjerite se da su se faze odvijale pravim redoslijedom:

Nakon što smo završili početno testiranje, prelazimo na provjeru zahtjeva:

• Povezivanje i podešavanje skripte trebalo bi da se desi automatski (treba samo da povežete js fajl) - Da
• Ponovno povezivanje fajla skripte ne bi trebalo da izazove pad - Da
• Koristite samo standardne jQuery mehanizme - Da (koristila se samo funkcija selektora)
• Interfejs bi trebao biti jednostavan i razumljiv - Da
• Možete kreirati nekoliko nezavisnih lanaca faza - Da
• Uvijek biste trebali biti u mogućnosti da brzo ispravite radnje skripte - Da (skripta je napisana prilično jednostavno; glavni dio se sastoji od provjere ulaznih podataka)
• Skripta ne bi trebala nametati složena ograničenja vašem kodu (maksimalno - potreba za dodavanjem funkcije za obavještavanje o njegovom završetku) - Da (unutar funkcija getFakeLoader poziva se samo funkcija za obavještavanje o njegovom završetku)

Sada imate jednostavnu i jasnu skriptu koja će vam pomoći da brzo organizirate korak po korak izvršavanje funkcija, bilo da se radi o učitavanju podataka ili jednostavnom izvođenju operacija.

Način da se ubrza učitavanje web stranica web stranice optimiziranjem Java skript datoteka i html koda stranice.

Javascript predstavlja poseban izazov za moderne resurse. Oni su jednostavno preopterećeni njima i to dovodi do sporog učitavanja i, samim tim, lošeg kvaliteta prikaza.

Ako je internetska veza spora, što je tipično za mobilne komunikacije i udaljene korisnike, tada se učitavanje značajno usporava, izazivajući opravdanu iritaciju.

Kada pretraživač pročita html kod, prikazuje rezultat uzastopno. One. svaki red prati jedan za drugim, ali na mjestu gdje je instaliran javascript dolazi do zaustavljanja - oni koji koriste ovaj jezik za pisanje resursa sigurno su naišli na ovaj problem.

Rješenje problema je asinhrono učitavanje. Samo postavite javascript na kraj html koda stranice. To će dovesti do činjenice da će učitavanje "java" biti odgođeno na vrijeme, osiguravajući ispravan prikaz stranice i brz početak za korisnike resursa. Najozbiljniji resursi prelaze na asinhrono učitavanje, pokušavajući zadržati svoju publiku i uvesti korisne inovacije.

Pogledajmo nekoliko načina za optimizaciju učitavanja javascripta.

Ova javascript datoteka se učitava na sljedeći način:

< script src= type= "text/javascript" >

HTML5 je oprezno riješio problem učitavanja stranice pomoću “java”. Ima mogućnost postavljanja asinhronog učitavanja skripte, što značajno povećava brzinu prikazivanja resursa. Da biste to učinili, dodajte async ili defer parametre u html kod, kao što je navedeno u nastavku:

< script async src= "//www.адрес_сайта/script.js" type= "text/javascript" >

< script defer src= "//www.адрес_сайта/script.js" type= "text/javascript" >

Koja je razlika između async i defer atributa?

Obje opcije rade s asinhronim učitavanjem javascripta. Razlika je u vremenu prikaza i početku izvršavanja skripte.

Atribut async će pokrenuti skriptu odmah nakon što se potpuno učita, ali će preskočiti prozor za učitavanje.

Kada postavite atribut odlaganja u kodu stranice, javascript će stajati u redu između drugih skripti bez ometanja njihovog reda izvršavanja. Počeće da radi tek nakon što se stranica u potpunosti učita, ali će propustiti događaj DOMContentLoaded(dokument objekt).

Međutim, ovi atributi ne rade u nekim modernim pretraživačima. Na primjer, Internet Explorer ne podržava atribute async i defer. I redovi document.write neće ništa pomoći u datotekama script.js

Specijalna skripta od Google-a za asinhrono učitavanje javascripta

Google je postao lider u razvoju tehnologija koje omogućavaju učitavanje web stranica u rekordnom vremenu. Osim toga, Googleov rang na pretraživaču snižava stranice sa lošim performansama, pa obratite pažnju na posebnu škripu od Google webmastera, dizajniranu za asinhrono učitavanje javascripta.

Da biste primijenili ovu skriptu, jednostavno zamijenite

on

Zatim uključujemo datoteku skripte extsrc.js

Dobijamo sljedeći kod:

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

Nažalost, ova metoda također ne radi za datoteke s document.write

Ova metoda je pogodna za sve pretraživače bez izuzetka, a radi čak i sa document.write

U html kodu stranice kreiramo prazan div blok:

I na kraju html koda, prije , ubacujemo skriptu za asinkrono učitavanje:

Evo bilo koje datoteke ili skripte koju treba učitati. // premjestiti ga na stvarnu poziciju prikaza document.getElementById("script_block").appendChild(document.getElementById("script_ad")); // prikaži document.getElementById("script_ad").style.display = "block";

Imajte na umu da u verzijama IE nižim od 6, uključujući, ovo preuzimanje ne radi. Ali nisam siguran da takvi korisnici ostaju – oni su manjina. Drugi pretraživači i servisi koriste ovu optimizaciju za javascript, što se bolje odražava u brzini učitavanja resursa.

Postoji izlaz: postavite Javascript linije na kraj html dokumenta (dakle, oni će se učitati nakon što se cijela stranica nacrta) i tek nakon toga sadržaj blokova će biti prikazan na pravim mjestima. To se zove . Svi ozbiljni projekti danas pokušavaju što prije preći na novu tehnologiju utovara. Štaviše, to je apsolutno lako.

Postoji nekoliko pristupa. Počeću redom.

script src= type= "text/javascript" >

Asinhrono učitavanje HTML5 skripte

HTML5 standard podržava mogućnost asinhronog učitavanja skripti, što može značajno ubrzati ukupno vrijeme preuzimanja stranice. Samo dodajte async ili odgodite .

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

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

Koja je razlika između atributa async i defer?

U oba slučaja dobijamo asinhrono učitavanje skripti. Jedina razlika je trenutak kada skripta počinje da se izvršava. Skripta sa async atributom će se izvršiti što je pre moguće nakon što se u potpunosti učita, ali pre nego što se učita objekat prozora. Ako se koristi atribut odlaganja, skripta neće narušiti redoslijed svog izvršavanja u odnosu na druge skripte i njegovo izvršenje će se dogoditi nakon što se stranica u potpunosti učita i analizira, ali prije događaja DOMContentLoaded objekta dokumenta.

Nažalost, ovaj mehanizam trenutno ne radi u svim pretraživačima (posebno IE). Također neće raditi ako postoje redovi document.write u datoteci script.js.

Asinkrono učitavanje javascripta sa Google skriptom

Kao što svi stručnjaci znaju, Google posebnu pažnju posvećuje brzini učitavanja sajtova i smanjuje spore u rezultatima pretrage. Kao pomoć, Google je razvio posebnu skriptu pomoću koje možete izvršiti asinkrono učitavanje javascripta.

Za korištenje, jednostavno zamijenite

on

I povežite datoteku skripte extsrc.js

Ispast će ovako:

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

Nažalost, ova metoda također ne radi za datoteke s document.write

Najbolje radno asinkrono učitavanje javascripta

Univerzalna metoda za sve pretraživače. Čak radi i sa document.write

Na mjestu na stranici gdje zapravo trebamo prikazati naš element, kreirajte prazan blok div:

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

Na samom kraju stranice, prije nego što ubacimo skriptu za asinhrono učitavanje datoteka:

< div id= "script_ad" class = "script_ad" style= "display:none;" >Evo bilo koje datoteke ili skripte koju treba učitati.< script type= "text/javascript" >// premjestiti ga na stvarni dokument pozicije prikaza. getElementById("script_block") . appendChild(document. getElementById("script_ad" ) ) ; // prikaži dokument. getElementById("script_ad") . stil. display = "blok" ;

U najstarijim verzijama IE (6 i niže) asinkrono učitavanje nažalost ne radi, ali takvih korisnika praktički više nema. Svi ostali pretraživači i servisi uspješno koriste moderno ubrzano učitavanje web stranica.

Moderne web stranice su jako opterećene javascript datotekama. To dovodi do sporijeg učitavanja i naknadnog prikaza stranice. U najgorim uslovima, posetilac sajta mora da čeka do 30 sekundi.

Ubrzajte učitavanje html stranica

Moderna upotreba JavaScripta

Moderne web stranice su jako opterećene javascript datotekama. To dovodi do sporijeg učitavanja i naknadnog prikaza stranice. U najgorim uslovima (spora internet konekcija, mnogo javascript fajlova), posetilac sajta mora da čeka i do 30 sekundi.

HTML je dizajniran na način da se web stranica učitava sinhrono (red po red) učitavajući redom sve elemente uključene u HTML kod.

Postoji izlaz: postavite Javascript linije na kraj html dokumenta (dakle, oni će se učitati nakon što se cijela stranica nacrta) i tek nakon toga sadržaj blokova će biti prikazan na pravim mjestima. To se zove .

Svi ozbiljni projekti danas pokušavaju što prije preći na novu tehnologiju utovara. Štaviše, to je apsolutno lako.

Postoji nekoliko pristupa. Počeću redom.

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

HTML5 standard podržava mogućnost asinhronog učitavanja skripti, što može značajno ubrzati ukupno vrijeme preuzimanja stranice. Samo dodajte async ili odgodite .

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

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

Koja je razlika između atributa async i defer?

U oba slučaja dobijamo asinhrono učitavanje skripti. Jedina razlika je trenutak kada skripta počinje da se izvršava. Skripta sa async atributom će se izvršiti što je pre moguće nakon što se u potpunosti učita, ali pre nego što se učita objekat prozora. Ako se koristi atribut odlaganja, skripta neće narušiti redoslijed svog izvršavanja u odnosu na druge skripte i njegovo izvršenje će se dogoditi nakon što se stranica u potpunosti učita i raščlani, ali prije događaja DOMContentLoaded objekta dokumenta.

Nažalost, ovaj mehanizam trenutno ne radi u svim pretraživačima (posebno IE). Također neće raditi ako postoje redovi document.write u datoteci script.js.

Kao što svi stručnjaci znaju, Google posebnu pažnju posvećuje brzini učitavanja sajtova i smanjuje spore u rezultatima pretrage. Kao pomoć, Google je razvio posebnu skriptu pomoću koje možete izvršiti asinkrono učitavanje javascripta.

Za korištenje, jednostavno zamijenite

on

I povežite datoteku skripte extsrc.js

Ispast će ovako:

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

Nažalost, ova metoda također ne radi za datoteke s document.write

Univerzalna metoda za sve pretraživače. Čak radi i sa document.write

Na mjestu na stranici gdje zapravo trebamo prikazati naš element, kreirajte prazan blok div:

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

Na samom kraju stranice, prije nego što ubacimo skriptu za asinhrono učitavanje datoteka:

< div id= "script_ad" class = "script_ad" style= "display:none;" >Evo bilo koje datoteke ili skripte koju treba učitati.< script type= "text/javascript" >// premjestiti ga na stvarni dokument pozicije prikaza. getElementById("script_block") . appendChild(document. getElementById("script_ad" ) ) ; // prikaži dokument. getElementById("script_ad") . stil. display = "blok" ;

U najstarijim verzijama IE (6 i niže) asinkrono učitavanje nažalost ne radi, ali takvih korisnika praktički više nema. Svi ostali pretraživači i servisi uspješno koriste moderno ubrzano učitavanje web stranica.

Sada ću vam reći o zanimljivoj metodi koja će vam pomoći da ubrzate svoju WordPress stranicu paralelnim učitavanjem skripti.

čemu služi?

Sve je vrlo jednostavno. Moderna web stranica je zbirka širokog spektra skripti, oznaka, isječaka, stilova, fontova i svega ostalog. Kao što razumete, što je više "dobrota", to je duže potrebno da se vaša stranica učita. Što se JavaScript-a tiče, to je druga stvar. Jeste li ikada primijetili takav zastoj kada se čini da se stranica učitala, ali kartica pokazuje da se stranica još uvijek učitava? Ovo se dešava kada se određena skripta nije učitala do kraja. Bilo bi u redu, ponekad je stranica potpuno neaktivna dok se ne učita ista, naizgled nevažna skripta. A vaši korisnici jednostavno možda neće imati dovoljno strpljenja.

Ovaj koncept je potpuno suprotan sinhronom učitavanju, što je obična skripta kao što je:

Poziv asinhrone skripte izgleda ovako:

Sada skripte neće prisiljavati vaše korisnike da čekaju na njihovo potpuno učitavanje, sve će se odvijati paralelno.

Kako automatizovati proces?

Jasno je da ako ručno povežete skripte i nema ih mnogo, onda to možete učiniti ručno, jednostavnim dodavanjem odgovarajućeg atributa pozivnom kodu. Ali kako to možete automatizirati ako, na primjer, imate WordPress sa gomilom skripti koje se, osim toga, automatski pozivaju?

Pronađite već poznatu datoteku functions.php vaše teme i tamo ubacite sljedeći kod (na primjer, na kraju):

// asinhrona javascript funkcija wcs_defer_javascripts ($url) (if (FALSE === strpos($url, ".js")) vrati $url; if (strpos($url, "jquery.js")) vrati $url; return "$url" async="async"; ) add_filter("clean_url", "wcs_defer_javascripts", 11, 1);

Zaključak

Šta mogu dodati u zaključku? Ova skripta možda nije pogodna za svakoga, jer ko zna koje skripte ste povezali, pa je instalirajte i eksperimentirajte. Takva skripta ne može biti loša, osim možda nekompatibilnosti sa određenim sajtom zbog njegovih specifičnosti. Ovo je bio još jedan mali korak ka velikoj optimizaciji Vaše web stranice.