Slik øker du webområdet med Tag

"forutså"nettlesere er fremtiden for toppfart surfing på Internett, bringer oss ressurser vi ønsker selv før vi vet at vi vil ha dem. Dagens nettlesere allerede gjøre noen spådommer nå og da for å fremskynde henting og gjengivelse av dokumenter. For å ta dette til neste trinn ser vi ingen andre enn webutviklere.

Utviklere har en ganske god idé av hvordan deres nettsteder er navigert, og hvilken ressurser blir ofte bedt om og dermed kan de forutsi noen fremtidige operasjoner nettlesere bør gjøre for nettsteder. Alt som trengs nå er for utviklere å finne en måte å relé disse spådommer til nettlesere og sette dem til god bruk. Dette er hvor noen spesielle "HTML-linker" kommer inn.

En oppdatering på HTTP-forespørsler

Før du tar en titt på disse koblingene, er det på tide å oppdatere minnet om hvordan en typisk HTTP-forespurt filhenting opererer. La oss si at noen som heter Joe, ønsker å besøke et nettsted.

Her er hva som skjer neste:

1. Joe skriver nettstedets menneskelige tilbakekallbare adresse i en nettleser adresselinje og trykker "Enter".
2. Når den mottok den adressen, spør nettleseren en DNS-server (komplimenter til ISP) for IP-adressen til adressen gitt av Joe.
3. DNS-serveren forplikter seg.
4. Nå som nettleseren kjenner IP-adressen, sender den en melding (i TCP dialekt) til nettstedets server, og ber om en tilkobling.
5. Hvis serveren er i live og vel, sender den et svar som bekrefter nettleserens forespørsel, og nettleseren svarer og kvitterer serverens melding. (Merk: Ja, dette er en ekstremt vannet versjon av et TCP-håndtrykk mellom en klient og en server.)
6. Når håndtrykkene er over, etableres en forbindelse mellom de to.
7. Nå endrer nettleseren sin dialektstil til HTTP og spør serveren for nettstedet.
8. Serveren, som kjenner hjemmesiden til nettstedet, returnerer nettopp det, som mottas av nettleseren, og vist til Joe som venter veldig tålmodig foran datamaskinen.

En typisk HTTP-forespørsel går gjennom alle det (og mer) for å hente et dokument via Internett. Så hvis noen av disse prosessene kan hoppes opp når det er mulig, vi kan redusere tiden vi må vente på levering av ressursene vi ønsker.

HTML Link Relasjoner

W3C spesifiserer 4 HTML-linkrelasjoner (rel for forhold) oppkalt dns-prefetch, forhåndstilkobling, prefetch, og prerender. Sammen kalles de (ved W3C) "Ressurs tips". Nå skal vi se hva de kan gjøre og hvor de kan brukes.

1. DNS Prefetch

I DNS prefetch, den domenenavn oppløsning (aka å få den matchende IP-adressen fra DNS-serveren) er gjort på forhånd.

La oss si at det er en referanseside på et nettsted med mange referanselinker til søstersiden. Når en bruker besøker referansesiden, er det en høy sannsynlighet at brukeren vil navigere til søstersiden. Så, en tidlig DNS-oppslag for søstersiden kan redusere tiden det tar å åpne nettstedet (og dermed forbedre brukeropplevelsen).

Dette latens reduksjon via DNS prefetching kan gjøres ved å legge til denne koden på referansesiden.

Når en nettleser behandler denne koden på referansesiden, vil den legge til DNS-oppslaget til søstersiden til oppgavskøene, og når den er fri for andre høyt prioriterte oppgaver i køen, starter den DNS-oppløsningen av søsterside.

Så når en bruker til slutt klikker på en av koblingene som tar dem til søstersiden, kan DNS-oppløsningen til dette nettstedet allerede ha blitt fullført, og nettleseren kan med en gang starte etableringen av TCP-serveren til klientserveren med søstersiden server, slik at siden lastes raskere.

Denne funksjonen er tilgjengelig i nesten alle moderne nettlesere bortsett fra Safari fra mars 2016.

2. Forkoble

Forkoble er et skritt videre fra DNS-prefetch, det etablerer en forbindelse til serveren som det kan bli en forespørsel sendt senere i fremtiden.

W3C lister et ideelt brukstilfelle for forkobling: omdirigeringer. Utviklere bruker omdirigeringer av flere grunner.

I dette tilfellet er en nettlesers neste forespørsel (omadressert nettsted) 100% forutsigbar, og kan være forkoblet til, til redusere navigasjonsforsinkelsen.

Tenk deg at det er en mellomledd side som omdirigerer til "xyzsite", vil følgende HTML-link gjøre nettleseren forkoble til xyzsite-serveren når den kommer til den mellomliggende siden.

Fra mars 2016 er dette tilgjengelig i Chrome, Opera og Firefox.

3. Prefetch

Med prefetch, for en ressurs, nettleseren begynner å implementere DNS-oppløsningen av ressursens domenenavn, deretter utfører en TCP-tilkobling med ressursens server, gjør HTTP-forespørselen, og til slutt henter og lagrer den forhåndsdefinerte ressursen i nettleserens cache.

Hvis du er sikker på hvilke ressurser som trengs senere, er det ressursen som skal forhåndsinnhentes på forhånd. der ligger fangsten. Prefetching tar gjetning, og hvis du antar feil, kan du faktisk sakte ned i stedet for å øke hastigheten på nettstedet ditt.

For online bøker, gallerier eller porteføljer, hvis brukeren mest sannsynlig vil bla til neste side, forhåndsinnhenting av ressursene, for eksempel Bilder, kan fange opp ting betydelig. Her er koden for å gjøre det.

Prefetch støttes i Chrome, Firefox og Opera.

4. Prerender

Bare for HTML-sider kan prerendering gjøres. En prerendered HTML-side er gjengitt frakoblet, og er malt på skjermen når den faktisk trengs av brukeren. Gjengivelse koster et høyere beregningsarbeid og minne ressurs; pluss, for å gjøre en side, kan nettleseren trenge ekstra ressurser (som bilder lagt til siden) som vil føre til mer konsekvente forespørsler via nettleser.

Så, prerender må være brukes med forsiktighet, og ikke overutnyttet. Hvis du legger til følgende kode, skal du forhåndsvise siden "Om".

Prerender er allerede tilgjengelig i Chrome, IE og Opera fra mars 2016.

Noen ting å merke seg

(1) Ingen av de ovennevnte ressurshintene garanterer utførelsen og gjennomføringen av de ulike stadiene av forespørselen den er laget for, fordi når nettleseren allerede er opptatt, behandler forespørslene som trengs for driften av den nåværende siden brukeren er i, utfører disse optimaliseringene kan hindre brukerens nåværende oppgaver.

Så, alt er i kø og utført når nettleseren føler seg fri nok til å gjøre det.

Disse ressurshintene må ikke nødvendigvis være til stede på siden, selv før siden lastes inn. De kan være lagt til senere av JavaScript, og ressurshintene vil gjøre jobben sin som vanlig.

(2) W3C angir a HTML-linkattributt kalt hint sannsynlighet, pr (med verdi 0 til 1) for disse ressurshintene, som kan brukes til å gi sannsynligheten for forespørsler som vil bli gjort i fremtiden. Jeg har ikke sett dette attributtet blir implementert av en hvilken som helst nettleser ennå. Som et eksempel sier følgende kode at det er en 80% sjanse for at xyzsite vil bli forespurt i fremtiden og 30% for omsiden.

Vi kan også legge til det valgfrie crossorigin-attributtet til ressurshintene for å informere nettleseren til den koblede forespørselen CORS-legitimasjon.