Krav: Når du forespør et nettsted, må du laste inn mange ressurser, nettverksforespørsler påvirker også hastigheten på visningen av nettsiden, når brukeren klikker på operasjonen for å laste inn noen ressurser kan det påvirke brukeropplevelsen, nå som Internett utvikler seg raskt, er ikke lenger båndbredde og trafikk så dyrt, hvordan forhåndslaster man ressurser på forhånd eller etablerer en forbindelse med målserveren på forhånd?
Preconnect
Nøkkelordforhåndskoblingen for elementegenskaper er et hint til nettleseren om at brukeren kan trenge ressurser fra målkilden slik at nettleseren kan bruke demForbedre brukeropplevelsen ved å initiere tilkoblinger til denne kilden på forhånd。
preconnect lar nettleseren utføre en rekke handlinger før en HTTP-forespørsel offisielt sendes til serveren, inkludert DNS-oppløsning, TLS-forhandling, TCP-håndtrykk, som eliminerer rundtur-forsinkelse og sparer tid for brukeren.
Preconnect er et viktig optimaliseringsmiddel for å redusere rundtur-veien i mange forespørsler – i noen tilfeller med hundrevis eller tusenvis av millisekunder i forsinkelse.
Her er et eksempel på bruk av preconnect for Google Fonts, hvor ved å legge til en preconnect-prompt til fonts.gstatic.com, vil nettleseren umiddelbart starte en forespørsel som utføres parallelt med CSS-forespørselen. I dette scenariet eliminerer preconnect tre RTT-er (Round-Trip Time) fra den kritiske veien ogRedusert latens med mer enn et halvt sekund。
Syntaksen er som følger:
Dokumentasjon:Innloggingen med hyperkoblingen er synlig.
DNS-prefetch bruker DNS prefetch
Nøkkelordet dns-prefetch for elementattributtet er for å varsle nettleseren om at brukeren kan trenge en ressurs fra målkilden, slik at nettleseren kan forbedre brukeropplevelsen ved å forebyggende utføre DNS-oppløsning for den kilden.
DNS-forhåndshenting gjør at nettleseren kan være på siden mens brukeren surferKjør DNS-oppløsning i bakgrunnen。 På denne måten fullføres DNS-oppløsningen når brukeren klikker på en lenke, slik at latenstiden kan reduseres. DNS-prefetching av en gitt URL kan gjøres ved å legge til rel="dns-prefetch" i egenskapene til en lenketagg, vi anbefaler å håndtere Google-fonter, Google Analytics og CDN.
"DNS-forespørsler har svært lite båndbreddetrafikk, men latensen kan være høy, spesielt på mobile enheter. DNS spesifisert ved forhåndshenting kan redusere latenstiden betydelig i visse situasjoner, for eksempel når en bruker klikker på en lenke. Noen ganger kan selv ett sekunds forsinkelse reduseres – Mozilla Developer Network"
Syntaksen er som følger:
Dokumentasjon:Innloggingen med hyperkoblingen er synlig.
Forspenning forhåndsladet
Forhåndsinnlastingsverdien til elementegenskapen lar deg erklære en henteforespørsel i HTML, hvor du spesifiserer ressursene siden snart vil trenge, og du vil begynne å laste tidlig i sidens livssyklus, før nettleserens hovedgjengivelsesmekanisme starter. Dette sikrer at de er tilgjengelige tidligere og mindre sannsynlig å blokkere gjengivelsen av siden, noe som forbedrer ytelsen. Selv om navnet inneholder begrepet last, laster og kjører ikke skriptet, men planlegger det bare til nedlasting og cache med høyere prioritet.
Preload er en ny webstandard som styrer hvordan spesifikke ressurser lastes inn, en oppgradering av subresource prefetch, som ble avviklet i januar 2016. Denne kommandoen kan <link> brukes i , f.eks. <link rel="preload">. Generelt er det best å bruke forhåndsinnlasting for å laste inn de viktigste ressursene dine, som bilder, CSS, JavaScript og fontfiler. Dette må ikke forveksles med nettleserforhåndsinnlasting, som kun forhåndslaster ressurser deklarert i HTML. Preload-direktivet overvinner faktisk denne begrensningen og tillater forhåndslasting av ressurser definert i CSS og JavaScript, og lar beslutninger om når hver ressurs skal brukes.
Preload skiller seg fra prefetch ved at det fokuserer på den nåværende siden og laster ressurser med høy prioritet, mens Prefetch fokuserer på ressursen som neste side laster inn og laster med lav prioritet. Merk også at forhåndslasting ikke blokkerer vinduets onload-hendelse.
Mange forskjellige innholdstyper kan forhåndslastes inn. De mulige som eiendomsverdier er:
lyd: En lydfil, vanligvis brukt for <audio>.
document: 旨在由<frame>或嵌入的 HTML 文档<iframe>。
Embed: Ressursen som skal legges <embed>inn i elementet.
fetch: En ressurs som skal aksesseres via fetch eller XHR-forespørsel, som en ArrayBuffer- eller JSON-fil.
font: 字体文件。
Bilde: Bildefil.
objekt: Ressursen som skal legges <object>inn i elementet.
script: JavaScript 文件。
style: CSS 样式表。
track: WebVTT 文件。
worker: En JavaScript-webarbeider eller delt worker.
Video: En videofil, vanligvis brukt for <video>.
Syntaksen er som følger:
Dokumentasjon:Innloggingen med hyperkoblingen er synlig.
|
Publisert på 26.09.2022 21:45:08
|
|
|
|
Publisert på 28.09.2022 08:54:26
|
