A webhely gyorsítása a címkével

"felvetve"A böngészők a legjobb sebességű internetes szörfözés jövője, erőforrásokat hozunk nekünk még mielőtt tudnánk, hogy akarjuk őket. A mai böngészők már csinál néhány jóslatok most, majd felgyorsítja a dokumentumok beolvasását és megjelenítését. Ha ezt a következő lépéssel kívánja elérni, akkor nem más, mint a webfejlesztők.

A fejlesztőknek van egy elég jó ötlet nak,-nek hogyan navigálják a webhelyeiket, és melyik erőforrásokat a leggyakrabban kérik és így megjósolhatnak néhány jövőbeli műveleti böngészőt a webhelyek esetében. Minden, ami most szükséges, a fejlesztőknek megtalálniuk kell a módját relé ezeket jóslatok böngészőkhöz és használják őket. Itt jönnek be néhány speciális "HTML link".

A HTTP-kérések frissítése

Mielőtt megvizsgálnánk ezeket a linkeket, itt az ideje, hogy frissítsük a memóriát arról, hogy hogyan történik egy tipikus HTTP-kért fájl-letöltési művelet. Tegyük fel, hogy valaki, aki Joe nevet szeretne, meglátogat egy webhelyet.

Az alábbiak szerint történik:

1. Joe beírja a weboldal humánusan visszahívható címét a böngésző címsorába, és megnyomja az "Enter" billentyűt.
2. Miután megkapta ezt a címet, a böngésző megkérdezi a DNS-kiszolgálót (ISP-kiegészítőket) a Joe által megadott cím IP-címére.
3. A DNS-kiszolgáló köteles.
4. Most, hogy a böngésző ismeri az IP-címet, üzenetet küld (a TCP-dialektusban) a webhely szerverére, és kér egy kapcsolatot.
5. Ha a szerver életben van és jól működik, akkor a böngésző kérését nyugtázó választ küld, és a böngésző válaszol és nyugtázza a kiszolgáló üzenetét. (jegyzet: Igen, ez egy rendkívül hidegített változat a TCP kézfogásról az ügyfél és a kiszolgáló között.)
6. Amikor a kézfogások véget érnek, kapcsolat jön létre a kettő között.
7. Most, a böngésző megváltoztatja a dialektus stílusát HTTP-re, és megkérdezi a szervert a webhelyre.
8. A szerver, aki ismeri a honlap kezdőlapját, csak azt adja vissza, amit a böngésző fogad, és azt mutatta be Joe-nak, aki nagyon türelmesen vár a számítógép előtt..

Egy tipikus HTTP kérés megy keresztül minden hogy (és több) egy dokumentumot az interneten keresztül szerezzen be. Tehát, ha ezek a folyamatok bármelyike lehet, ha lehetséges, tudunk csökkentse azt az időt, amire várnunk kell a kívánt erőforrások kézbesítéséhez.

HTML link kapcsolatok

A W3C 4 HTML kapcsolati kapcsolatot határoz meg (rel a kapcsolatért) dns-előzetes letöltési, preconnect, előzetes letöltési, és Előmegjelenítés. Együtt nevezik őket (a W3C által) a "Erőforrás tanácsok- Most meglátjuk mit tehetnek és ahol használhatók.

1. DNS Prefetch

A DNS előhívásban a domain névfeloldás (más néven a megfelelő IP-cím megszerzése a DNS-kiszolgálóról) előre történik.

Tegyük fel, hogy van egy hivatkozási oldal a honlapon, ahol sok referencia link található a testvéroldalára. Amikor egy felhasználó meglátogatja a referencia oldalt, van egy nagy valószínűséggel hogy a felhasználó navigáljon a nővér oldalára. Szóval, egy korai DNS-keresés a testvéroldal számára csökkenthető a webhely megnyitásához szükséges idő (ezáltal javítva a felhasználói élményt).

Ez késleltetéscsökkentés a DNS előhívásával ezt a kódot hozzáadhatja a referenciaoldalhoz.

Amikor egy böngésző feldolgozza ezt a kódot a referenciaoldalon, hozzáadja a nővér oldal DNS-keresését a feladatsorokhoz, és amikor mentes a sorban lévő egyéb kiemelt fontosságú feladatoktól, akkor elkezdi a DNS-felbontást a testvéroldal.

Tehát, ha a felhasználó végül rákattint az egyik linkre, amely a testvéroldalra vezet, az adott webhely DNS-felbontása már befejeződött, és a böngésző azonnal elkezdheti létrehozni a kliens-szerver TCP-kapcsolatot a nővér oldalával az oldal gyorsabb betöltése.

Ez a funkció szinte minden modern böngészőben elérhető, kivéve Safari, március 2016-tól.

2. Csatlakozás

A kapcsolat előrehaladása a DNS-előnézetből egy további lépést jelent, és kapcsolatot létesít a szerverrel, amelyhez később a későbbiekben küldött kérés érkezhet.

A W3C egy ideális felhasználási esetet sorol fel az előcsatlakozáshoz: átirányítások. A fejlesztők több okból használják az átirányításokat.

Ebben az esetben a böngésző következő kérése (átirányított webhely) 100% -os kiszámíthatóság, és lehet előre kell kapcsolódnia, nak nek csökkentse a navigációs késleltetést.

Képzeld el, hogy van egy közvetítő webhelyoldal, amely átirányítja a következőt:xyzsite", a következő HTML hivatkozás a böngészőt először az xyzsite szerverrel fogja összekapcsolni, amikor eljut az adott közvetítő oldalhoz.

2016 márciusa óta ez elérhető a Chrome, az Opera és a Firefox alkalmazásban.

3. Prefetch

Val vel előzetes letöltési, erőforrás, a böngésző elkezdi végrehajtani az erőforrás domain nevének DNS-felbontását, azután TCP kapcsolatot létesít az erőforrás szerverével, elvégzi a HTTP kérést, és végül letölti és tárolja az előzetesen feltöltött erőforrást a böngésző gyorsítótárában.

Ha biztos benne, hogy milyen erőforrásokra lesz szükség később, ez az előzetes letöltési erőforrás; ott van a fogás. Az előzetes letöltés találgatással jár, és ha helytelenül kitalálod, valószínűleg lelassítod a helyed felgyorsítása helyett.

Online könyvek, galériák vagy portfóliók esetében, ha a felhasználó valószínűleg legközelebb böngészi a következő oldalt, előzetes letöltési forrásokat, például képek, jelentősen felgyorsíthatja a dolgokat. Itt van a kód, hogy ezt tegye.

A Chrome, a Firefox és az Opera támogatja az előzetes letöltést.

4. Prerender

Csak HTML oldalak esetében lehet előzetes közzététel. Egy előre közzétett HTML oldal van offline állapotban, és a képernyőre festett, ha a felhasználónak szüksége van rá. rendering magasabb számítási munkát és memóriaforrást költ; plusz egy oldal megjelenítéséhez a böngészőnek további erőforrásokra van szüksége (mint például az oldalhoz hozzáadott képek), amelyek az alábbiakhoz vezetnek több következetes kérés böngésző segítségével.

Így, Előmegjelenítés kell lennie óvatosan kell használni, és nem túlzott. A következő kód hozzáadásával előzetesen meg kell adnia az "About" (Körülbelül) oldalt.

A Prerender már 2016 márciusától már elérhető a Chrome, IE és Opera operációs rendszerben.

Néhány dolog, amit meg kell jegyezni

(1) A fent említett erőforrás-tanácsok egyike sem garantálja a kérés különböző szakaszainak végrehajtását és befejezését, mert ha a böngésző már elfoglalta az aktuális oldal működéséhez szükséges kérelmeket, akkor a felhasználó elvégzi ezeket az optimalizálásokat akadályozhatja a felhasználó aktuális feladatait.

Szóval, minden van sorba állítva és végrehajtva, amikor a böngésző elég szabadnak érzi ezt.

Ezek az erőforrás-tanácsok nem feltétlenül szükségesek az oldalon az oldal betöltése előtt. Lehetnek később hozzáadta a JavaScript, és az erőforrás-tanácsok a szokásos módon fogják elvégezni a munkájukat.

(2) A W3C a HTML link attribútum hívott tipp valószínűsége, pr (a 0-1 értékkel) ezekre az erőforrás-tippekre, amelyek felhasználhatók a jövőbeni kérések valószínűségének biztosítására. Még nem láttam, hogy ezt az attribútumot bármilyen böngésző valósította meg. Például a következő kód azt állítja, hogy a jövőben 80% -os esélyt kell kérni a xyzsite-nek, és 30% -ot a következő oldalról..

Azt is hozzáadhatjuk az opcionális crossorigin attribútumot az erőforrás tippekhez, hogy tájékoztassuk a böngészőt a hivatkozott kérés CORS hitelesítőjéről.