Ako urýchliť web s tagom

"predvídanie"prehliadače sú budúcnosťou špičkového surfovania na internete, prináša nám zdroje, ktoré chceme ešte skôr, než budeme vedieť, že ich chceme. Dnešné prehliadače už existujú urobiť niektorí predpovede teraz a potom urýchliť načítavanie a vyhotovovanie dokumentov. Aby sme to urobili do ďalšieho kroku, nehľadáme žiadnu inú ako vývojárov webu.

Vývojári majú celkom dobrý nápad z ako sa navigujú ich webové stránky, a ktoré Najčastejšie sa požadujú zdroje a preto môžu predpovedať niektoré budúce operácie, ktoré by prehliadače mali robiť pre stránky. Všetko, čo je teraz potrebné, je pre vývojárov, aby našli cestu relé tieto predpovede na prehliadače a používať ich. Toto je miesto, kde prichádzajú nejaké špeciálne "odkazy HTML".

Aktualizácia žiadostí HTTP

Predtým, ako sa pozriete na tieto odkazy, je čas obnoviť našu pamäť, ako sa stane typická operácia načítania súborov požadovaná protokolom HTTP. Povedzme, že niekto s menom Joe chce navštíviť webovú stránku.

Tu je nasledujúci postup:

1. Joe napíše adresy ľudskej adresy v adresnom riadku prehliadača a stlačí "Enter".
2. Po prijatí tejto adresy prehliadač požiada server DNS (komplimenty ISP) o adresu IP adresy, ktorú poskytol Joe.
3. Server DNS je povinný.
4. Teraz, keď prehliadač pozná IP adresu, pošle správu (v TCP dialekte) na server webových stránok a požiada o pripojenie.
5. Ak je server nažive a dobre, odošle odpoveď potvrdzujúcu požiadavku prehliadača a prehliadač odpovie a potvrdí správu servera. (Poznámka: Áno, ide o extrémne zničenú verziu správy TCP medzi klientom a serverom.)
6. Po skončení ruky sa vytvorí spojenie medzi týmito dvoma.
7. Teraz prehliadač zmení svoj štýl dialektu na HTTP a požiada server o webové stránky.
8. Server, ktorý pozná domovskú stránku webových stránok, vracia práve to, čo dostane prehliadač a zobrazí ho Joeovi, ktorý čaká veľmi trpezlivo pred počítačom.

Typický žiadosť HTTP prechádza všetko (a viac), aby ste dokument načítavali cez internet. Takže ak niektorý z týchto procesov môže byť spustená, ak je to možné, môžeme skrátiť čas, ktorý musíme čakať na doručenie zdrojov, ktoré chceme.

Vzťahy s odkazom vo formáte HTML

W3C špecifikuje 4 vzťahy HTML odkazov (rel pre vzťah) dns-Prefetch, vopred pripojeným, prefetch, a predbežne vykresliť. Spolu sú nazývané (W3C) "Zdroje rady"Teraz uvidíme čo môžu robiť a kde môžu byť použité.

1. Prevzatie služby DNS

Pri predbežnom načítaní služby DNS: rozlíšenie názvu domény (aka získanie zodpovedajúcej adresy IP z DNS servera) sa vykonáva vopred.

Povedzme, že na webovej stránke s odkazmi na jej sesterskú stránku je odkazová stránka. Keď používateľ navštívi referenčnú stránku, existuje a vysoká pravdepodobnosť že používateľ prejde na sesterskú stránku. Takže skoré vyhľadávanie DNS pre sesterské stránky môže skrátiť čas potrebný na otvorenie stránky (čím sa zlepší užívateľská skúsenosť).

toto zníženie latencie prostredníctvom predbežného načítania DNS môžete vykonať pridaním tohto kódu na referenčnú stránku.

Keď prehliadač spracuje tento kód na referenčnú stránku, pridá DNS vyhľadávanie sesterskej stránky do svojich frontov úloh a ak je bez ďalších úloh s vysokou prioritou vo fronte, spustí rozlíšenie DNS sesterská stránka.

Takže keď používateľ nakoniec klikne na niektorý z odkazov, ktorý ich prevezme na sesterskú webovú stránku, rozlíšenie DNS tejto stránky už mohlo byť dokončené a prehliadač môže okamžite začať vytvárať spojenie TCP klient-server so sesterskou stránkou server, čím sa táto stránka načíta rýchlejšie.

Táto funkcia je k dispozícii takmer vo všetkých moderných prehliadačoch okrem Safari od marca 2016.

2. Prepojte

Prepojenie je o krok ďalej od predbežného načítania DNS, vytvára pripojenie k serveru, ku ktorému môže byť neskôr odoslaná žiadosť.

W3C uvádza ideálny prípad použitia pre prepojenie: presmerovanie. Vývojári používajú presmerovania z viacerých dôvodov.

V tomto prípade je ďalšia žiadosť prehliadača (presmerovaná web) 100% predvídateľné, a môže byť prepojené na, na skrátiť latenciu navigácie.

Predstavte si, že existuje stránka sprostredkujúca stránka, ktorá presmeruje na stránku "xyzsite"nasledujúci odkaz HTML umožní, aby sa prehliadač pripojil k serveru xyzsite, keď sa dostane na sprostredkujúcu stránku.

Od marca 2016 je to k dispozícii v prehliadačoch Chrome, Opera a Firefox.

3. Predbežne načítať

s prefetch, pre zdroj, prehliadač začne implementovať rozlíšenie DNS názvu domény zdroja, potom vykoná spojenie TCP so serverom zdroja, robí požiadavku HTTP a nakoniec načíta a ukladá predvolený zdroj v cache prehliadača.

Ak ste si istí, ktoré zdroje budú potrebné neskôr, je to predtým zdroj na predbežné načítanie. v ňom leží úlovok. Predbežné vyzdvihnutie má dohady, a ak hádáte nesprávne, môžete skutočne spomaliť, a nie urýchliť svoje stránky.

V prípade online kníh, galérií alebo portfólií, ak používateľ pravdepodobne prechádza na ďalšiu stránku, predbežne načítanie zdrojov, ako sú snímky, môže výrazne zrýchliť veci. Tu je kód na to.

Prefetch je podporovaný v prehliadačoch Chrome, Firefox a Opera.

4. Prerender

Iba pre stránky HTML je možné vykonať predbežné vykresľovanie. Predbežná stránka HTML je vylúčené, a je natretý na obrazovke, keď je užívateľ skutočne potrebný. vykresľovanie stojí vyššiu výpočtovú prácu a pamäťový zdroj; a na to, aby mohol vykresliť stránku, môže prehliadač potrebovať ďalšie zdroje (napríklad obrázky pridané do stránky), ktoré povedú k následné požiadavky prehliadačom.

tak, predbežne vykresliť musí byť používajte s opatrnosťou, a nie nadmerne používané. Pridanie nasledujúceho kódu predbežne predrežuje stránku "Informácie".

Prerender je už k dispozícii v prehliadačoch Chrome, IE a Opera od marca 2016.

Niekoľko vecí, ktoré treba poznamenať

(1) Žiadny z vyššie uvedených odporúčaní o prostriedkoch nezaručuje vykonanie a dokončenie jednotlivých fáz požiadaviek, ktoré sa dajú vykonať, pretože keď je prehliadač už zaneprázdnený na spracovanie požiadaviek potrebných na prevádzku aktuálnej stránky, v ktorej sa používateľ nachádza, vykonáva tieto optimalizácie môže brániť súčasným úlohám používateľa.

Takže všetko je frontu a spustený, keď sa prehliadač cíti dostatočne voľný, aby tak urobil.

Tieto rady o zdrojoch nemusia byť prítomné na stránke ešte pred načítaním stránky. Môžu byť pridané neskôr pomocou jazyka JavaScript, a rady o prostriedkoch budú robiť svoju prácu ako obvykle.

(2) W3C špecifikuje a Atribút odkazu HTML volal pravdepodobnosť nástrahy, pr (s hodnotou 0 až 1) pre tieto rady zdrojov, ktoré môžu byť použité na poskytnutie pravdepodobnosti požiadaviek, ktoré sa budú robiť v budúcnosti. Tento atribút nebol v súčasnosti implementovaný žiadnym prehliadačom. Napríklad nasledujúci kód uvádza, že v budúcnosti bude požadovaná 80% šanca xyzsite a 30% pre približne stránku.

Môžeme tiež pridať voliteľný atribút crossorigin do poradia zdrojov, aby sme informovali prehliadač o zodpovedajúcich informáciách CORS o prepojenej žiadosti.