Požadavky: Při žádosti o webovou stránku je potřeba načíst hodně zdrojů, síťové požadavky také ovlivňují rychlost vykreslování webové stránky, když uživatel klikne na operaci pro načtení, některé zdroje mohou ovlivnit uživatelský zážitek, nyní už rychlý rozvoj internetu, šířka pásma a provoz nejsou tak drahé, jak předem načíst zdroje nebo navázat spojení s cílovým serverem předem?
Předpřipojení
Klíčové slovo preconnect pro vlastnosti prvků je nápovědou pro prohlížeč, že uživatel může potřebovat zdroje z cílového zdroje, aby je prohlížeč mohl využívatZlepšte uživatelský zážitek tím, že předem iniciujete spojení s tímto zdrojem。
Preconnect umožňuje prohlížeči provést řadu akcí před oficiálním odesláním HTTP požadavku na server, včetně DNS řešení, TLS vyjednávání, TCP handshake, což eliminuje zpětnou latenci a šetří uživateli čas.
Preconnect je důležitým prostředkem optimalizace ke snížení okružní cesty u mnoha požadavků – v některých případech o stovky či tisíce milisekund latence.
Zde je příklad použití preconnect pro Google Fonts, kde přidáním výzvy k preconnect do fonts.gstatic.com prohlížeč okamžitě zahájí požadavek, který bude vykonán paralelně s požadavkem CSS. V tomto scénáři předpřipojení eliminuje tři RTT (čas zpětné cesty) z kritické cesty aSnížená latence o více než půl sekundy。
Syntaxe je následující:
Dokumentace:Přihlášení k hypertextovému odkazu je viditelné.
DNS-prefetch používá DNS prefetch
Klíčové slovo dns-prefetch atributu element slouží k upozornění prohlížeče uživateli, že uživatel může potřebovat zdroj z cílového zdroje, aby prohlížeč mohl zlepšit uživatelský zážitek tím, že předem provede DNS řešení tohoto zdroje.
DNS přednačítání umožňuje prohlížeči být na stránce během prohlížení uživateleSpusť DNS resolution na pozadí。 Tímto způsobem je DNS řešení dokončeno kliknutím uživatele na odkaz, takže lze snížit latenci. DNS přednačítání dané URL lze provést přidáním rel="dns-prefetch' k vlastnostem linkového tagu, doporučujeme obsluhovat Google fonty, Google Analytics a CDN.
"DNS požadavky mají velmi malou šířku pásma, ale latence může být vysoká, zejména na mobilních zařízeních. DNS specifikované přednačítáním může výrazně snížit latenci v určitých situacích, například když uživatel klikne na odkaz. Někdy lze zkrátit i zpoždění o jednu sekundu – Mozilla Developer Network"
Syntaxe je následující:
Dokumentace:Přihlášení k hypertextovému odkazu je viditelné.
Přednapjatí
Hodnota přednačtení vlastnosti element vám umožňuje deklarovat fetch request v HTML, specifikovat zdroje, které stránka brzy bude potřebovat, a chcete začít načítat brzy v životním cyklu stránky, ještě před zahájením hlavního vykreslovacího mechanismu prohlížeče. To zajišťuje, že jsou dostupné dříve a méně pravděpodobně zablokují vykreslování stránky, což zlepšuje výkon. I když název obsahuje termín načítání, skript se nenačte a nespouští, ale jen ho naplánuje na stažení a ukládání do vyrovnávací paměti s vyšší prioritou.
Preload je nový webový standard, který řídí, jak jsou načítány konkrétní zdroje, což je upgrade prefetch podzdrojů, který byl ukončen v lednu 2016. Tento příkaz lze <link> použít v , např. <link rel="preload">. Obecně je nejlepší použít přednačtení k načtení nejdůležitějších zdrojů, jako jsou obrázky, CSS, JavaScript a fontové soubory. To by nemělo být zaměňováno s přednačítáním prohlížeče, které pouze přednačítá zdroje deklarované v HTML. Direktiva preload toto omezení skutečně překonává a umožňuje přednačítání zdrojů definovaných v CSS a JavaScriptu a umožňuje rozhodnutí, kdy použít každý zdroj.
Preload se liší od prefetch tím, že se zaměřuje na aktuální stránku a načítá zdroje s vysokou prioritou, zatímco Prefetch se zaměřuje na zdroj, který načte další stránka, a načítá s nízkou prioritou. Také si všimněte, že přednačtení neblokuje událost načtení okna.
Lze předem načíst mnoho různých typů obsahu. Možné hodnoty nemovitostí jsou:
audio: Zvukový soubor, obvykle používaný pro <audio>.
document: 旨在由<frame>或嵌入的 HTML 文档<iframe>。
embed: Zdroj, který je třeba vložit <embed>do prvku.
fetch: Zdroj, ke kterému se přistupuje přes fetch nebo XHR požadavek, například soubor ArrayBuffer nebo JSON.
font: 字体文件。
obrázek: Obrazový soubor.
objekt: Zdroj, který má být vložen <object>do prvku.
script: JavaScript 文件。
style: CSS 样式表。
track: WebVTT 文件。
pracovník: JavaScriptový webový pracovník nebo sdílený pracovník.
video: video soubor, obvykle používaný pro <video>.
Syntaxe je následující:
Dokumentace:Přihlášení k hypertextovému odkazu je viditelné.
|
Zveřejněno 26.09.2022 21:45:08
|
|
|
|
Zveřejněno 28.09.2022 8:54:26
|
