Jak urychlit webové stránky pomocí značky

"Předvídání"prohlížeče jsou budoucnost rychlého surfování po internetu.", přinese nám prostředky, které chceme ještě než víme, že je chceme. Dnešní prohlížeče udělat nějaký předpovědi urychlit načítání a vykreslování dokumentů. Chcete-li tento krok přenést na další krok, díváme se na jiné uživatele než webové vývojáře.

Vývojáři mají docela dobrý nápad z jejich navigaci, a který nejžádanější zdroje a tak mohou předpovědět některé budoucí prohlížeče operací, které by měly udělat pro weby. Vše, co nyní potřebujeme, je, aby vývojáři našli cestu relé předpovědi do prohlížečů a dobře využít. To je místo, kde některé speciální "HTML odkazy" přijít.

Obnovení požadavků HTTP

Předtím, než se podíváte na tyto odkazy, je na čase obnovit naši paměť o tom, jak probíhá typická operace načítání souborů vyžadovaná protokolem HTTP. Řekněme, že někdo jménem Joe chce navštívit webové stránky.

Zde je následující postup:

1. Joe píše adresu webu, kterou si člověk může přehrát, do adresního řádku prohlížeče a stiskne klávesu Enter..
2. Po obdržení této adresy se prohlížeč zeptá serveru DNS (komplimenty poskytovatele ISP) na adresu IP adresy, kterou zadal Joe..
3. DNS server je povinen.
4. Nyní, když prohlížeč zná IP adresu, odešle zprávu (v dialektu TCP) na server webové stránky a požádá o připojení.
5. Pokud je server naživu a dobře, odešle odpověď potvrzující požadavek prohlížeče a prohlížeč odpoví a potvrdí zprávu serveru. (Poznámka: Ano, jedná se o extrémně zhuštěnou verzi handshake TCP mezi klientem a serverem.)
6. Když jsou handshake skončeny, je mezi nimi navázáno spojení.
7. Nyní prohlížeč změní styl dialektu na HTTP a požádá server o webovou stránku.
8. Server, který zná domovskou stránku webové stránky, vrací jen to, co je přijímáno prohlížečem a ukazuje Joeovi, který čeká velmi trpělivě před počítačem.

Typický požadavek HTTP prochází Všechno že (a více) načte dokument přes internet. Takže pokud některý z těchto procesů pokud je to možné, může být spuštěn, můžeme zkrátit čas, který musíme čekat na dodání zdrojů, které chceme.

Vztahy s HTML odkazy

W3C specifikuje 4 vazby propojení HTML (rel pro vztah) dns-prefetch, předpojte, prefetch, a prerender. Společně se nazývají (podle W3C).Rady pro zdroje"Teď uvidíme." co mohou dělat a kde mohou být použity.

1. DNS Prefetch

V předvolbě DNS rozlišení doménových jmen (aka získání odpovídající IP adresy ze serveru DNS) se provádí předem.

Řekněme, že na webových stránkách je odkazová stránka se spoustou odkazů na sesterské stránky. Když uživatel navštíví referenční stránku, je zde vysoká pravděpodobnost že uživatel přejde na sesterskou stránku. Takže časné vyhledávání DNS pro sesterský web může zkrátit dobu potřebnou k otevření webu (což zlepší uživatelský komfort).

Tento redukce latence přes přednastavení DNS lze provést přidáním tohoto kódu na referenční stránku.

Když prohlížeč tento kód zpracovává na referenční stránce, přidá do vyhledávacího frontu vyhledávací dotaz DNS sesterského serveru a pokud je ve frontě volný od ostatních úloh s vysokou prioritou, spustí se rozlišení DNS sestra místo.

Když tedy uživatel konečně klikne na jeden z odkazů, který je přivede do sesterského webu, může být rozlišení DNS tohoto webu již dokončeno a prohlížeč může okamžitě začít navazovat spojení TCP-klient-server se sesterským serverem. rychlejší načítání stránky.

Tato funkce je k dispozici téměř ve všech moderních prohlížečích kromě Safari od března 2016.

2. Předpojte

Preconnect je o krok dále od přednastavení DNS, naváže spojení se serverem, na který může být v budoucnu odeslán požadavek..

W3C uvádí ideální případ použití pro preconnect: přesměrování. Vývojáři používají přesměrování z několika důvodů.

V tomto případě je následující požadavek prohlížeče (přesměrovaný web) 100% předvídatelný, a může být připojeny, na snížení latence navigace.

Představte si, že je to stránka zprostředkovatele, která přesměruje na „xyzsite", následující HTML odkaz učiní prohlížeč preconnect s serverem xyzsite, když se dostane na tuto stránku zprostředkovatele.".

Od března 2016 je k dispozici v prohlížečích Chrome, Opera a Firefox.

3. Prefetch

S prefetch, pro zdroj, prohlížeč začíná implementovat rozlišení DNS názvu domény, pak provede TCP spojení se serverem zdroje, provede požadavek HTTP a nakonec vyvolá a uloží přednastavený zdroj v mezipaměti prohlíľeče.

Pokud jste si jisti, které zdroje budou potřeba později, je to zdroj, který předem načte; v něm leží úlovek. Prefetching trvá dohady, a pokud se domníváte, že jste nesprávně, můžete místo toho zpomalit místo toho, abyste se zrychlili.

Pokud je pro uživatele online knih, galerií nebo portfolií nejpravděpodobnější, že vyhledá další stránku, provede přednastavení zdrojů, jako je například snímky, může výrazně urychlit věci. Tady je kód, jak to udělat.

Prefetch je podporován v prohlížečích Chrome, Firefox a Opera.

4. Prerender

Prerekvizovat lze pouze stránky HTML. Stránka s přednastaveným HTML je zobrazeny offline, a je natřený na obrazovku, když to uživatel skutečně potřebuje. Vykreslování stojí vyšší výpočetní práce a paměťový zdroj; plus, aby renderoval stránku, může prohlížeč potřebovat další zdroje (jako obrázky přidané na stránku), které povedou k více následných požadavků prohlížečem.

Tak, prerender musí být s opatrností, a není přehnané. Přidání následujícího kódu předběžně předřadí stránku „O aplikaci“.

Prerender je již k dispozici v Chrome, IE a Opera od března 2016.

Několik věcí k poznámce

(1) Žádný z výše uvedených informací o zdrojích nezaručuje provedení a dokončení různých fází požadavku, protože je to v případě, že prohlížeč je zaneprázdněn zpracováním požadavků potřebných pro operace aktuální stránky, ve které se uživatel nachází. může bránit aktuálním úkolům uživatele.

Takže, všechno je ve frontě a provedeno, když se prohlížeč cítí dostatečně svobodný, aby tak učinil.

Tyto informace o zdrojích nemusí být na stránce nutně přítomny ani před načtením stránky. Oni mohou být přidán později JavaScriptem, a tipy na zdroje budou dělat svou práci jako obvykle.

(2) W3C specifikuje a Atribut odkazu HTML volal pravděpodobnost nápovědy, pr (s hodnotou 0 až 1) pro tyto rady zdrojů, které mohou být použity k poskytnutí pravděpodobnosti požadavků, které budou provedeny v budoucnu. Zatím jsem neviděl tento atribut implementovaný žádným prohlížečem. Následující kód například uvádí, že v budoucnu bude požadováno 80% šanci na xyzsite a 30% na stránku.

Můžeme také přidat volitelný atribut crossorigin do tipů zdrojů, abychom informovali prohlížeč o pověření CORS s propojeným požadavkem.