Krav: När du begär en webbplats behöver du ladda in mycket resurser, nätverksförfrågningar påverkar också hastigheten på webbsidans rendering, när användaren klickar på operationen för att ladda vissa resurser kan det påverka användarupplevelsen, nu när internet utvecklas snabbt, är bandbredd och trafik inte längre lika dyra, hur förladdar man resurser i förväg eller etablerar en länk med målservern i förväg?
Preconnect
Nyckelordsförkopplingen för elementegenskaper är en antydan till webbläsaren att användaren kan behöva resurser från målkällan så att webbläsaren kan använda demFörbättra användarupplevelsen genom att initiera anslutningar till denna källa i förebyggande syfte。
preconnect gör det möjligt för webbläsaren att utföra ett antal åtgärder innan en HTTP-förfrågan officiellt skickas till servern, inklusive DNS-upplösning, TLS-förhandling, TCP-handshake, vilket eliminerar rundres-latens och sparar tid för användaren.
Preconnect är ett viktigt optimeringsmedel för att minska rundtursvägen i många förfrågningar – i vissa fall med hundratals eller tusentals millisekunders latens.
Här är ett exempel på att använda preconnect för Google Fonts, där webbläsaren omedelbart initierar en förfrågan som körs parallellt med CSS-förfrågan genom att lägga till en preconnect-prompt till fonts.gstatic.com. I detta scenario eliminerar preconnect tre RTT:er (Round-Trip Time) från den kritiska vägen ochMinskad latens med mer än en halv sekund。
Syntaxen är följande:
Dokumentation:Inloggningen med hyperlänken är synlig.
DNS-prefetch använder DNS prefetch
Nyckelordet dns-prefetch för elementattributet är för att varna webbläsaren för användaren att användaren kan behöva en resurs från målkällan, så att webbläsaren kan förbättra användarupplevelsen genom att förebyggande utföra DNS-lösning för den källan.
DNS-förhämtning gör att webbläsaren kan vara på sidan medan användaren surfarKör DNS-upplösning i bakgrunden。 På så sätt slutförs DNS-upplösningen när användaren klickar på en länk, så latensen kan minskas. DNS-prefetching av en given URL kan göras genom att lägga till rel="dns-prefetch' i egenskaperna för en länktagg, vi rekommenderar att man hanterar Google Fonts, Google Analytics och CDN.
"DNS-förfrågningar har väldigt lite bandbreddstrafik, men latensen kan vara hög, särskilt på mobila enheter. DNS som specificeras genom prefetching kan avsevärt minska latensen i vissa situationer, till exempel när en användare klickar på en länk. Ibland kan även en fördröjning på en sekund minskas – Mozilla Developer Network"
Syntaxen är följande:
Dokumentation:Inloggningen med hyperlänken är synlig.
Förladdad förladdning
Förladdningsvärdet för elementegenskapen gör att du kan deklarera en fetch-begäran i HTML, där du specificerar vilka resurser sidan snart kommer att behöva, och du vill börja ladda tidigt i sidans livscykel, innan webbläsarens huvudsakliga renderingsmekanism startar. Detta säkerställer att de är tillgängliga tidigare och mindre sannolikt blockerar sidans rendering, vilket förbättrar prestandan. Även om namnet innehåller termen load, laddar och kör det inte skriptet, utan schemalägger det bara för nedladdning och cache med högre prioritet.
Preload är en ny webbstandard som styr hur specifika resurser laddas, en uppgradering av subresource prefetch, som avvecklades i januari 2016. Detta kommando kan <link> användas i , t.ex. <link rel="preload">. Generellt är det bäst att använda förladdning för att ladda dina viktigaste resurser, såsom bilder, CSS, JavaScript och typsnittsfiler. Detta ska inte förväxlas med webbläsarförladdning, som endast förladdar resurser deklarerade i HTML. Preload-direktivet övervinner faktiskt denna begränsning och tillåter förladdning av resurser definierade i CSS och JavaScript, samt möjliggör beslut om när varje resurs ska användas.
Preload skiljer sig från prefetch genom att den fokuserar på den aktuella sidan och laddar resurser med hög prioritet, medan Prefetch fokuserar på resursen som nästa sida ska ladda och laddar med låg prioritet. Observera också att förladdning inte blockerar fönstrets onload-händelse.
Många olika innehållstyper kan förladdas. De möjliga som fastighetsvärden är:
ljud: En ljudfil, vanligtvis använd för <audio>.
document: 旨在由<frame>或嵌入的 HTML 文档<iframe>。
Inbädda: Resursen som ska bäddas <embed>in i elementet.
fetch: En resurs som ska nås via fetch eller XHR-förfrågan, såsom en ArrayBuffer- eller JSON-fil.
font: 字体文件。
Bild: Bildfil.
objekt: Resursen som ska bäddas <object>in i elementet.
script: JavaScript 文件。
style: CSS 样式表。
track: WebVTT 文件。
worker: En JavaScript-webbarbetare eller shared worker.
Video: En videofil, vanligtvis använd för <video>.
Syntaxen är följande:
Dokumentation:Inloggningen med hyperlänken är synlig.
|
Publicerad på 2022-09-26 21:45:08
|
|
|
|
Publicerad på 2022-09-28 08:54:26
|
