Kako ubrzati web-lokaciju pomoću oznake

"predviđajući"preglednici su budućnost brzog surfanja internetom, donosi nam resurse koje želimo čak i prije nego što znamo da ih želimo. Današnji preglednici već napraviti neki predviđanja s vremena na vrijeme ubrzati dohvaćanje i prikazivanje dokumenata. Kako bismo ovo prešli na sljedeći korak, gledamo samo na web programere.

Programeri imaju prilično dobra ideja od kako se upravlja njihovim web stranicama, i koji resursi se najčešće traže i stoga mogu predvidjeti neke buduće operacije koje bi preglednici trebali učiniti za web-lokacije. Sve što je sada potrebno je da programeri pronađu način proslijedite ih predviđanja u preglednike i dobro ih iskoristite. Ovo je mjesto gdje dolaze neki posebni "HTML linkovi".

Osvježavanje HTTP zahtjeva

Prije nego što pogledate ove veze, vrijeme je da osvježite našu memoriju o tome kako se događa tipična operacija dohvaćanja datoteka koja se traži u HTTP-u. Recimo da netko s imenom Joe želi posjetiti web-lokaciju.

Evo što će se sljedeće dogoditi:

1. Joe u adresnu traku preglednika upisuje adresu koju čovjek može pamtiti i pritisne "Enter".
2. Nakon što je primio tu adresu, preglednik traži DNS poslužitelj (pohvale od ISP-a) za IP adresu adrese koju je dao Joe.
3. DNS poslužitelj se obvezuje.
4. Sada kada preglednik poznaje IP adresu, šalje poruku (u dijalektu TCP) poslužitelju web-lokacije tražeći vezu.
5. Ako je poslužitelj živ i zdrav, šalje odgovor koji potvrđuje zahtjev preglednika, a preglednik odgovara i potvrđuje poruku poslužitelja. (Bilješka: Da, to je iznimno razrijeđena verzija TCP rukovanja između klijenta i poslužitelja.)
6. Kada se rukovanje završi, između njih se uspostavlja veza.
7. Sada preglednik mijenja stil dijalekta na HTTP i traži poslužitelj za web-mjesto.
8. Poslužitelj, znajući početnu stranicu web-mjesta, vraća upravo to, što je primljeno u pregledniku i koje se prikazuje Joeu koji strpljivo čeka ispred računala.

Prolazi se tipičan HTTP zahtjev svi da (i više) dohvati dokument putem Interneta. Dakle, ako bilo koji od tih procesa može se pokrenuti kada je to moguće, možemo smanjiti vrijeme koje moramo čekati na isporuku resursa koje želimo.

Odnosi na HTML vezu

W3C navodi 4 HTML veze (rel za vezu) DNS-Predučitaj, predpovezivanje, Predučitaj, i Iscrtavanje unaprijed. Zajedno se nazivaju (prema W3C)Savjeti za resurse". Sada ćemo vidjeti što mogu učiniti i gdje se mogu koristiti.

1. Priprema DNS-a

U DNS prefetchu, rješavanje naziva domene (aka dobivanje odgovarajuću IP adresu od DNS poslužitelja) je učinio ispred vremena.

Recimo da na web-lokaciji postoji referentna stranica s mnogo referentnih veza sa svojom sestrinskom web-lokacijom. Kada korisnik posjeti referentnu stranicu, postoji velika vjerojatnost korisnik će se kretati do sestrinskog web-mjesta. Dakle, jedan rano traženje DNS-a za web-lokaciju sestre može smanjiti vrijeme potrebno za otvaranje web-lokacije (čime se poboljšava korisničko iskustvo).

Ovaj smanjenje latencije putem DNS pretpojačavanja može se izvršiti dodavanjem ovog koda na referentnu stranicu.

Kada preglednik obrađuje ovaj kôd na referentnoj stranici, dodaje DNS pretraživanje sestrinske web-lokacije u redove zadataka, a kada je u redu bez drugih zadataka visokog prioriteta, pokrenut će DNS rješenje sestrinska stranica.

Dakle, kada korisnik konačno klikne na jednu od veza koja ih vodi do sestrinske web-lokacije, DNS razlučivost te web-lokacije možda je već dovršena, a preglednik može odmah početi uspostavljati TCP-vezu klijent-poslužitelj s sestrinskom web-lokacijom. poslužitelja, što učitava stranicu brže.

Ova značajka dostupna je u gotovo svim modernim preglednicima osim Safari od ožujka 2016. godine.

2. Prekonektirajte

Preconnect je korak dalje od prethodnog preuzimanja DNS-a, uspostavlja vezu s poslužiteljem na koji možda postoji zahtjev poslan kasnije u budućnosti.

W3C navodi idealni slučaj uporabe za preconnect: preusmjeravanja. Programeri koriste preusmjeravanja iz više razloga.

U tom slučaju sljedeći zahtjev preglednika (stranica s preusmjerenjem) je 100% predvidljivo, i može biti povezan s, do smanjite latenciju navigacije.

Zamislite da postoji stranica posredničke web-lokacije koja preusmjerava naxyzsite", sljedeći HTML link učinit će preglednik preconnect s xyzsite poslužiteljem, kada dođe do te posredničke stranice.

Od ožujka 2016. to je dostupno u preglednicima Chrome, Opera i Firefox.

3. Prethodno preuzmite

S Predučitaj, za resurs, preglednik počinje implementirati DNS rješenje naziva domene resursa, zatim obavlja TCP vezu s poslužiteljem resursa, čini HTTP zahtjev i na kraju dohvaća i pohranjuje unaprijed prikupljeni resurs u predmemoriji preglednika.

Ako ste sigurni koji će resursi biti potrebni kasnije, to je resurs koji treba unaprijed pripremiti; tu leži ulov. Prethodno dohvaćanje zahtijeva nagađanje, i ako pogriješite, možda ćete usporiti umjesto da ubrzate svoju web-lokaciju.

Za online knjige, galerije ili portfelje, ako je korisnik najvjerojatnije da će pregledati sljedeću stranicu, unaprijed dohvatite resurse kao što je slika, može znatno ubrzati stvari. Evo koda za to.

Pretpregled je podržan u preglednicima Chrome, Firefox i Opera.

4. Predodžba

Samo za HTML stranice može se izvršiti predodređivanje. Predinformirana HTML stranica je prikazano izvanmrežno, i oslikana na zaslonu kada je korisnik stvarno potreban. Iscrtavanje košta veći računski rad i memoriju; plus, kako bi se prikazala stranica, preglednik će možda trebati dodatne resurse (kao što su slike dodane na stranicu) što će dovesti do toga konsekventnije zahtjeve prema pregledniku.

Tako, Iscrtavanje unaprijed mora biti koristiti s oprezom, i ne preporuča se. Dodavanjem sljedećeg koda unaprijed će se prikazati stranica "O programu".

Prerender je već dostupan u preglednicima Chrome, IE i Opera od ožujka 2016. godine.

Nekoliko stvari koje treba zapaziti

(1) Nijedan od gore navedenih savjeta resursa ne jamči izvršavanje i dovršavanje različitih faza zahtjeva za koje je napravljen jer preglednik već zauzima obradu zahtjeva potrebnih za operacije trenutne stranice na kojoj se nalazi korisnik, izvršavajući ove optimizacije može ometati trenutne zadatke korisnika.

Dakle, sve je u redu čekanja i izvršava kada se preglednik osjeća dovoljno slobodnim da to učini.

Ovi savjeti za sredstva ne moraju nužno biti prisutni na stranici čak i prije učitavanja stranice. Oni mogu biti kasnije dodan JavaScriptom, i savjeti o resursima će obaviti svoj posao kao i obično.

(2) W3C određuje a Atribut HTML veze zvao vjerojatnost uputa, pr (s vrijednošću 0 do 1) za te savjete o resursima, koji se mogu koristiti za osiguravanje vjerojatnosti zahtjeva koji će se izvršiti u budućnosti. Nisam još vidio taj atribut koji je implementirao bilo koji preglednik. Primjerice, sljedeći kôd navodi da će se 80% šanse xyzsite tražiti ubuduće i 30% za about page.

Također možemo dodati opcijski crossorigin atribut u savjete o resursima kako bismo pregledali CORS vjerodajnicu povezanog zahtjeva.