Kuidas kiirendada veebilehte sildiga

"Ettenähtud"brauserid on kiireima interneti surfamise tulevik, toovad meile ressursse, mida me tahame isegi enne, kui me teame, et me neid tahame. Tänased brauserid on juba olemas tegema mõned ennustused Nüüd ja seejärel kiirendada dokumentide kättesaamist ja esitamist. Järgmiseks sammuks vaatame me ainult veebiarendajaid.

Arendajatel on a päris hea idee of kuidas nende veebisaite navigeeritakse, ja mis ressursse taotletakse kõige sagedamini ja seega saavad nad ennustada mõningaid tulevasi operatsioonibrausereid saitide jaoks. Kõik, mis nüüd vaja on, on arendajatele võimalus leida viis edastab need ennustused brauseritele ja neid hästi ära kasutada. Siin on mõned spetsiaalsed HTML-lingid.

HTTP päringute täiendamine

Enne nende linkide vaatamist on aeg uuendada meie mälu selle kohta, kuidas toimib tavaline HTTP-päringuga faili tõmbamise toiming. Oletame, et keegi nimega Joe tahab külastada veebisaiti.

Järgnevalt juhtub järgmine:

1. Joe kirjutab veebilehe inimlikult äratuntava aadressi brauseri aadressiribale ja vajutab "Enter".
2. Kui see aadress on kätte saadud, küsib brauser DNS-serverit (ISP komplimente) Joe poolt antud aadressi IP-aadressilt.
3. DNS-server kohustab.
4. Nüüd, kui brauser teab IP-aadressi, saadab see sõnumi (TCP dialektis) veebisaidi serverile, paludes ühendust.
5. Kui server on elus ja hästi, saadab see brauseri taotluse kinnitava vastuse ning brauser vastab ja kinnitab serveri sõnumit. (Märge: Jah, see on kliendi ja serveri vahelise TCP käepigistuse äärmiselt veega versioon.)
6. Kui käepigistus on lõppenud, luuakse nende kahe vahel ühendus.
7. Nüüd muudab brauser oma murde stiili HTTP-ks ja küsib serverilt veebilehte.
8. Server, kes teab veebilehe kodulehte, tagastab just selle, mis on brauseri poolt vastu võetud ja näidatud Joe'ile, kes ootab väga kannatlikult arvuti ees.

Tüüpiline HTTP-päring läheb läbi kõik et (ja rohkem) dokumendi hankimiseks Interneti kaudu. Nii et kui mõni neist protsessidest on saab võimaluse korral käivitada, me saame vähendada aega, mida peame ootama, kui me vajame ressursse.

HTML-linkide suhted

W3C määrab 4 HTML-lingi seost (rel suhte kohta) dns-prefetch, eelnevalt ühendada, prefetch, ja eelkäija. Koos nimetatakse neid (W3C-ga) the "Ressursside vihjed". Nüüd näeme mida nad saavad teha ja kus neid saab kasutada.

1. DNS-i eelvaatlus

DNS-i eelsalvestuses domeeninime eraldusvõime (nimega saada sobiva IP-aadressi DNS-serverist) tehakse enne tähtaega.

Oletame, et veebilehel on viide, kus on palju viiteid oma õe saidile. Kui kasutaja külastab viitlehte, on olemas a suur tõenäosus et kasutaja navigeerib õe saiti. Niisiis, varane DNS-i otsing õe saidi jaoks võib vähendada veebilehe avamise aega (parandades sellega kasutajate kogemusi).

See latentsuse vähendamine DNS-eelseadistuse kaudu seda saab teha, lisades selle koodi viitlehele.

Kui brauser töötleb seda koodi viitleheküljel, lisab ta selle siseküljele DNS-i otsingu oma ülesannete järjekorradesse ja kui see on vaba teistest järjekordsetest esmatähtsatest ülesannetest, käivitab see DNS-i lahenduse õe sait.

Nii et kui kasutaja lõpuks klõpsab ühel lingilt, mis viib nad õde-saidile, võib selle saidi DNS-i lahendus olla juba valmis ja brauser võib kohe alustada kliendi-serveri TCP-ühenduse loomist õe saidiga server, tehes selle lehe kiiremini.

See funktsioon on saadaval peaaegu kõikides kaasaegsetes brauserites peale Safari 2016. aasta märtsis.

2. Ühendage ühendus

Eelhäälestus on samm edasi DNS-i eelsalvest, see loob ühenduse serveriga, millele võib tulevikus hiljem saata päringu.

W3C loeb eelühenduse jaoks ideaalseks kasutamiseks: ümbersuunamised. Arendajad kasutavad ümbersuunamisi mitmel põhjusel.

Sel juhul on brauseri järgmine päring (ümber suunatud veebileht) 100% prognoositav, ja saab olema eelnevalt ühendatud, kuni vähendada navigeerimise latentsust.

Kujutage ette, et on olemas vahendus saidi leht, mis suunab "xyzsite", teeb järgmine HTML-link brauseri eelhäälestuse xyzsite serveriga, kui see sellesse vahenduslehele jõuab.

Alates 2016. aasta märtsist on see saadaval Chrome'is, Opera ja Firefoxis.

3. Eelnõu

Koos prefetch, ressurss, brauser alustab ressursi domeeninime DNS-i lahenduse rakendamist, siis teostab TCP-ühenduse ressursi serveriga, teeb HTTP-päringu ja lõpuks tõmbab ja salvestab eelsalvestatud ressursi brauseri vahemälus.

Kui olete kindel, milliseid ressursse hiljem vaja läheb, on see eelnevalt eelistatud ressurss; selles peitub saak. Eelnimetamine võtab arvaile, ja kui sa arvad valesti, võite teie saidi kiirendamise asemel tegelikult aeglustada.

Online-raamatute, galeriide või portfellide puhul, kui kasutaja tõenäoliselt sirvib järgmisele leheküljele, saadab sellised ressursid nagu pilte, võib kiirendada asju märkimisväärselt. Siin on kood seda teha.

Eelhinnangut toetab Chrome, Firefox ja Opera.

4. Prerender

Ainult HTML-lehekülgedel on võimalik eelhääletamist teha. Eelsalvestatud HTML-leht on offline, ja on värvitud ekraanile, kui kasutaja seda tegelikult vajab. Renderdamine maksab kõrgemat arvutustööd ja mälu; pluss, et lehele muuta, võib brauser vajada lisaressursse (näiteks leheküljele lisatud pilte), mis viivad rohkem järgnevaid taotlusi brauseri abil.

Nii et, eelkäija peab olema ettevaatlikult, ja mitte liiga palju. Järgmise koodi lisamine eelvaadab "About" lehekülje eelnevalt.

Prerender on juba 2016. aasta märtsis saadaval Chrome, IE ja Opera.

Mõned asjad, mida tuleb märkida

(1) Ükski ülalnimetatud ressursside vihjeid ei taga taotluste erinevate etappide teostamist ja lõpetamist, sest kui brauser on juba hõivatud töötlema praeguse lehekülje toimingute jaoks vajalikke taotlusi, siis täidab need optimeeringud võib takistada kasutaja praegusi ülesandeid.

Niisiis, kõik on järjekorras ja täidetakse, kui brauser tunneb seda piisavalt vabaks.

Need ressursside vihjed ei pea tingimata olema lehel isegi enne lehe laadimist. Nad võivad olla lisatud hiljem JavaScript, ja ressursside näpunäited teevad oma tööd nagu tavaliselt.

(2) W3C määrab a HTML-linki atribuut kutsus vihje tõenäosus, pr (väärtusega 0 kuni 1) nende ressursside kohta, mida saab kasutada tulevikus tehtavate päringute tõenäosuse tagamiseks. Ma pole siiski näinud seda atribuuti rakendamist mis tahes brauseriga. Näiteks näeb järgmine kood ette, et tulevikus nõutakse 80% tõenäosust xyzsite ja 30% umbes lehe kohta.

Me võime ka ressursi näpunäidetele lisada valikulise crossorigin atribuudi, et teavitada brauserit seotud päringu CORSi mandaadist.