Web-sivuston nopeuttaminen -merkinnällä

"ennustaa"selaimet ovat huippunopean Internetin selaamisen tulevaisuus, tuomme meille resursseja, joita haluamme jo ennen kuin tiedämme, että haluamme ne. Nykyiset selaimet ovat jo käytössä tehdä jonkin verran ennustukset nyt ja sitten nopeuttaa asiakirjojen hakemista ja esittämistä. Jos haluat siirtyä seuraavaan vaiheeseen, emme katso mitään muuta kuin web-kehittäjiä.

Kehittäjillä on a melko hyvä idea of miten heidän verkkosivustojaan navigoidaan, ja mikä resursseja pyydetään useimmiten ja siten he voivat ennustaa joidenkin tulevien toimintojen selaimien pitäisi tehdä sivustoja. Kaikki, mitä tarvitaan nyt, on kehittäjien löytää tapa välittää nämä ennustukset selaimiin ja laittaa ne hyvään käyttöön. Tässä on joitakin erityisiä "HTML-linkkejä".

HTTP-pyyntöjen päivitys

Ennen kuin tarkastelet näitä linkkejä, on aika päivittää muistimme siitä, miten tyypillinen HTTP-pyytämä tiedostohakutoiminto tapahtuu. Sanotaan, että joku, jonka nimi on Joe, haluaa vierailla verkkosivustolla.

Seuraavassa tapahtuu seuraavaa:

1. Joe kirjoittaa verkkosivuston inhimillisesti palautettavan osoitteen selaimen osoiteriville ja painaa "Enter".
2. Kun se on saanut tämän osoitteen, selain pyytää DNS-palvelinta (ISP: n komplimentteja) Joen antaman osoitteen IP-osoitteesta.
3. DNS-palvelin velvoittaa.
4. Nyt kun selain tietää IP-osoitteen, se lähettää viestin (TCP-murteessa) verkkosivuston palvelimelle ja pyytää yhteyttä.
5. Jos palvelin on elossa ja hyvin, se lähettää vastauksen, joka kuittaa selaimen pyynnön ja selain vastaa ja kuittaa palvelimen viestin. (Huomautus: Kyllä, tämä on erittäin kostea versio TCP-kättelystä asiakkaan ja palvelimen välillä.)
6. Kun kädenpuristukset ovat ohi, yhteys näiden kahden välille muodostuu.
7. Nyt selain muuttaa dialektityyliään HTTP-muotoon ja kysyy palvelimelta verkkosivustoa.
8. Palvelin, tietäen kotisivun kotisivun, palaa juuri siihen, joka selaimella on vastaanotettu ja osoitettu Joelle, joka odottaa erittäin kärsivällisesti tietokoneen edessä.

Tyypillinen HTTP-pyyntö menee läpi kaikki että (ja enemmän) haetaan asiakirja Internetin kautta. Joten jos jokin näistä prosesseista voidaan käynnistää, kun mahdollista, me voimme Vähennä aikaa, jota meidän on odotettava haluamiemme resurssien toimittamisesta.

HTML-linkkisuhteet

W3C määrittää 4 HTML-linkkisuhdetta (suht suhde) dns-prefetch, esiyhdistys, prefetch, ja Esihahmonna. Yhdessä niitä kutsutaan (W3C: n mukaan) the "Resurssien vihjeitä". Nyt näemme mitä he voivat tehdä ja missä niitä voidaan käyttää.

1. DNS-esikatselu

DNS-esihakemuksessa verkkotunnuksen nimi (eli vastaavan IP-osoitteen saaminen DNS-palvelimelta) tehdään etukäteen.

Oletetaan, että sivustossa on viittaussivu, jossa on paljon viittauslinkkejä sisar-sivustoonsa. Kun käyttäjä vierailee viittaussivulla, siellä on a suuri todennäköisyys että käyttäjä siirtyy sisar-sivustoon. Joten varhainen DNS-haku sisar-sivusto voi lyhentää sivuston avaamiseen kuluvaa aikaa (mikä parantaa käyttäjäkokemusta).

Tämä viiveen pienentäminen DNS-etukäteen voidaan tehdä lisäämällä tämä koodi viittaussivulle.

Kun selain käsittelee tätä koodia referenssisivulla, se lisää sisar-sivuston DNS-haun sen työjonoihin ja kun se on vapaa muista tärkeistä tehtävistä jonossa, se käynnistää DNS-ratkaisun sisar-sivusto.

Kun käyttäjä lopulta napsauttaa jotakin linkkiä, joka vie ne sisar-sivustoon, kyseisen sivuston DNS-resoluutio on ehkä jo saatettu päätökseen, ja selain voi heti aloittaa asiakkaan ja palvelimen TCP-yhteyden muodostamisen sisar-sivustoon palvelin, jolloin sivu latautuu nopeammin.

Tämä ominaisuus on saatavilla lähes kaikissa nykyaikaisissa selaimissa paitsi Safarissa maaliskuussa 2016.

2. Kytke yhteys

Yhteyden muodostaminen on askeleen päässä DNS-esihakemuksesta, se muodostaa yhteyden palvelimeen, johon voi myöhemmin lähettää pyynnön myöhemmin.

W3C: ssä luetellaan ihanteellinen käyttöliittymä etukäteen: ohjaukset. Kehittäjät käyttävät uudelleenohjauksia useista syistä.

Tässä tapauksessa selaimen seuraava pyyntö (uudelleenohjattu sivusto) on 100% ennustettavissa, ja voi etukäteen, että vähentää navigointiajan viivettä.

Kuvittele, että sivustossa on välittäjä, joka ohjaaxyzsite", seuraava HTML-linkki tekee selaimesta yhteyden xyzsite-palvelimeen, kun se siirtyy kyseiselle välittäjän sivulle.

Maaliskuusta 2016 lähtien tämä on saatavana Chrome, Opera ja Firefox.

3. Esikatselu

Kanssa prefetch, resurssille, selaimelle aloittaa resurssin verkkotunnuksen DNS-ratkaisun toteutuksen, sitten suorittaa TCP-yhteyden resurssin palvelimeen, tekee HTTP-pyynnön ja lopuksi noutaa ja tallentaa etukäteen haetun resurssin selaimen välimuistissa.

Jos olet varma, mitä resursseja tarvitaan myöhemmin, se on etukäteen laadittava resurssi; siinä on saalis. Esitulostus vie arvailua, ja jos arvaat väärin, saatat itse asiassa hidastaa sivuston nopeuttamista.

Verkkokirjoissa, gallerioissa tai salkkuissa, jos käyttäjä todennäköisesti selaa seuraavaan sivuun, hakea resursseja, kuten kuvien, voi nopeuttaa asioita huomattavasti. Tässä on koodi, jota haluat tehdä.

Ennakkomaksua tuetaan Chrome, Firefox ja Opera.

4. Prerender

Vain HTML-sivuilla voidaan tehdä ennakkoilmoituksia. Ensisijainen HTML-sivu on offline-tilassa, ja se on maalattu näytölle, kun käyttäjä todella tarvitsee sitä. renderointi maksaa korkeamman laskennallisen työn ja muistiresurssin; plus, jos haluat tehdä sivun, selain saattaa tarvita ylimääräisiä resursseja (kuten sivulle lisättyjä kuvia), jotka johtavat enemmän vastaavia pyyntöjä selaimella.

Niin, Esihahmonna on oltava käytetään varoen, ja ei liikaa. Seuraavan koodin lisääminen ennakoi "Tietoja" -sivun etukäteen.

Prerender on jo saatavilla Chromessa, IE: ssä ja Operassa maaliskuussa 2016.

Muutamia asioita, jotka on huomioitava

(1) Mikään edellä mainituista resurssien vihjeistä ei takaa pyynnön eri vaiheiden suorittamista ja loppuunsaattamista, koska selaimen ollessa jo varattu käsittelemään pyynnöt, joita käyttäjä tarvitsee nykyisen sivun toimintojen suorittamiseksi. voi estää käyttäjän nykyisiä tehtäviä.

Joten kaikki on jonossa ja suoritetaan, kun selain tuntuu tarpeeksi vapaaksi.

Näiden resurssivihjeiden ei tarvitse olla välttämättä läsnä sivulla vielä ennen sivun lataamista. Ne voivat olla lisätään myöhemmin JavaScriptin avulla, ja resurssien vihjeet tekevät työnsä tavalliseen tapaan.

(2) W3C määrittää a HTML-linkin määrite olla nimeltään vihjeen todennäköisyys, PR (arvolla 0 - 1) näille resurssien vihjeille, joita voidaan käyttää tulevaisuudessa tehtävien pyyntöjen todennäköisyyden varmistamiseen. En ole nähnyt tätä ominaisuutta mihinkään selaimeen vielä. Esimerkiksi seuraavassa koodissa todetaan, että tulevaisuudessa pyydetään 80%: n todennäköisyys xyzsite ja 30% noin sivulle.

Voimme myös lisätä valinnaisen crossorigin-määritteen resurssien vihjeisiin, jotta voit ilmoittaa selaimelle linkitetyn pyynnön CORS-tunnistetiedot.