Krav: Når man anmoder om et websted, skal man indlæse mange ressourcer, netværksanmodninger påvirker også hastigheden af webside-rendering; når brugeren klikker på operationen for at indlæse nogle ressourcer, kan det påvirke brugeroplevelsen, nu hvor internettets hurtige udvikling er, er båndbredde og trafik ikke længere så dyrt, hvordan forudindlæser man ressourcer på forhånd eller etablerer en forbindelse til målserveren på forhånd?
Forudforbindelse
Nøgleordsforforbindelsen for elementets egenskaber er et hint til browseren om, at brugeren måske har brug for ressourcer fra målkilden, så browseren kan bruge demForbedr brugeroplevelsen ved at initiere forbindelser til denne kilde på forhånd。
preconnect tillader browseren at udføre en række handlinger, før en HTTP-anmodning officielt sendes til serveren, herunder DNS-opløsning, TLS-forhandling, TCP-håndtryk, som eliminerer rund-tur-latens og sparer tid for brugeren.
Preconnect er en vigtig optimeringsmetode til at reducere rundrejse-stien i mange forespørgsler – i nogle tilfælde med hundreder eller tusinder af millisekunders forsinkelse.
Her er et eksempel på brug af preconnect til Google Fonts, hvor browseren ved at tilføje en preconnect-prompt til fonts.gstatic.com straks starter en forespørgsel, som vil blive udført parallelt med CSS-forespørgslen. I dette scenarie eliminerer preconnect tre RTT'er (Round-Trip Time) fra den kritiske vej ogReduceret latenstid med mere end et halvt sekund。
Syntaksen er som følger:
Dokumentation:Hyperlink-login er synlig.
DNS-prefetch bruger DNS prefetch
Nøgleordet dns-prefetch for elementattributten er for at advare browseren om, at brugeren kan få brug for en ressource fra målkilden, så browseren kan forbedre brugeroplevelsen ved at udføre DNS-resolution på forhånd for den kilde.
DNS-prefetching gør det muligt for browseren at være på siden, mens brugeren browserKør DNS-opløsning i baggrunden。 På denne måde fuldføres DNS-opløsning, når brugeren klikker på et link, så latenstiden kan reduceres. DNS-prefetching af en given URL kan udføres ved at tilføje rel="dns-prefetch' til egenskaberne for et linktag; vi anbefaler at håndtere Google-skrifttyper, Google Analytics og CDN.
"DNS-forespørgsler har meget lidt båndbreddetrafik, men latenstiden kan være høj, især på mobile enheder. DNS specificeret ved prefetching kan markant reducere latenstiden i visse scenarier, såsom når en bruger klikker på et link. Nogle gange kan selv et sekunds forsinkelse reduceres - Mozilla Developer Network"
Syntaksen er som følger:
Dokumentation:Hyperlink-login er synlig.
Forspænding forudindlæst
Forudindlæsningsværdien af elementegenskaben gør det muligt at erklære en henteanmodning i HTML, hvor du angiver de ressourcer, siden snart får brug for, og du vil begynde at indlæse tidligt i sidens livscyklus, før browserens hovedgengivelsesmekanisme starter. Dette sikrer, at de er tilgængelige tidligere og mindre tilbøjelige til at blokere gengivelsen af siden, hvilket forbedrer ydeevnen. Selv hvis navnet indeholder udtrykket load, indlæser og udfører det ikke scriptet, men planlægger det bare til download og cache med højere prioritet.
Preload er en ny webstandard, der styrer, hvordan specifikke ressourcer indlæses, en opgradering af subresource prefetch, som blev afviklet i januar 2016. Denne kommando kan <link> bruges i , f.eks. <link rel="preload">. Generelt er det bedst at bruge preload til at indlæse dine vigtigste ressourcer, såsom billeder, CSS, JavaScript og skrifttypefiler. Dette må ikke forveksles med browser-forudindlæsning, som kun forudindlæser ressourcer, der er angivet i HTML. Preload-direktivet overvinder faktisk denne begrænsning og tillader forudindlæsning af ressourcer defineret i CSS og JavaScript, samt muliggør beslutninger om, hvornår hver ressource skal anvendes.
Preload adskiller sig fra prefetch ved, at det fokuserer på den aktuelle side og indlæser ressourcer med høj prioritet, mens Prefetch fokuserer på den ressource, som næste side vil indlæse, og indlæser med lav prioritet. Bemærk også, at preload ikke blokerer vinduets onload-event.
Mange forskellige indholdstyper kan forudindlæses. De mulige som ejendomsværdier er:
lyd: En lydfil, som normalt bruges til <audio>.
document: 旨在由<frame>或嵌入的 HTML 文档<iframe>。
Embed: Ressourcen, der skal indlejres <embed>i elementet.
fetch: En ressource, der tilgås via fetch eller XHR-anmodning, såsom en ArrayBuffer- eller JSON-fil.
font: 字体文件。
Billede: Billedfil.
objekt: Ressourcen, der skal indlejres <object>i elementet.
script: JavaScript 文件。
style: CSS 样式表。
track: WebVTT 文件。
worker: En JavaScript-webarbejder eller shared worker.
Video: En videofil, som normalt bruges til <video>.
Syntaksen er som følger:
Dokumentation:Hyperlink-login er synlig.
|
Opslået på 26/09/2022 21.45.08
|
|
|
|
Opslået på 28/09/2022 08.54.26
|
