Vereisten: Bij het aanvragen van een website moet je veel resources laden, netwerkverzoeken beïnvloeden ook de snelheid van het renderen van de webpagina; wanneer de gebruiker op de operatie klikt om sommige resources te laden, kan dat de gebruikerservaring beïnvloeden; nu de snelle ontwikkeling van het internet, bandbreedte en verkeer niet meer zo duur zijn, hoe kun je resources vooraf laden of een verbinding met de doelserver opzetten?
Preconnect
De keyword preconnect voor elementeigenschappen is een hint aan de browser dat de gebruiker mogelijk resources van de doelbron nodig heeft zodat de browser deze kan gebruikenVerbeter de gebruikerservaring door preventief verbindingen met deze bron te initiëren。
preconnect stelt de browser in staat om een aantal acties uit te voeren voordat een HTTP-verzoek officieel naar de server wordt gestuurd, waaronder DNS-resolutie, TLS-onderhandeling, TCP-handshake, wat round-trip latentie elimineert en tijd bespaart voor de gebruiker.
Preconnect is een belangrijke manier van optimalisatie om het round-trippad in veel verzoeken te verminderen – in sommige gevallen met honderden of duizenden milliseconden latentie.
Hier is een voorbeeld van het gebruik van preconnect voor Google Fonts, waarbij door een preconnect-prompt toe te voegen aan fonts.gstatic.com, de browser direct een verzoek start dat parallel aan het CSS-verzoek wordt uitgevoerd. In dit scenario elimineert preconnect drie RTT's (Round-Trip Time) van het kritieke pad enVerminderde latentie met meer dan een halve seconde。
De syntaxis is als volgt:
Documentatie:De hyperlink-login is zichtbaar.
DNS-prefetch gebruikt DNS prefetch
Het sleutelwoord dns-prefetch van het elementattribuut is bedoeld om de browser te waarschuwen dat de gebruiker mogelijk een bron van de doelbron nodig heeft, zodat de browser de gebruikerservaring kan verbeteren door preventief DNS-resolutie uit te voeren voor die bron.
DNS-prefetching maakt het mogelijk dat de browser op de pagina blijft terwijl de gebruiker surftVoer DNS-resolutie op de achtergrond uit。 Op deze manier wordt DNS-resolutie voltooid wanneer de gebruiker op een link klikt, waardoor de latentie kan worden verminderd. DNS-prefetching van een gegeven URL kan worden gedaan door rel="dns-prefetch' toe te voegen aan de eigenschappen van een linktag; we raden aan om Google Fonts, Google Analytics en CDN te beheren.
"DNS-verzoeken hebben heel weinig bandbreedteverkeer, maar de latentie kan hoog zijn, vooral op mobiele apparaten. DNS gespecificeerd door prefetching kan de latentie aanzienlijk verminderen in bepaalde scenario's, zoals wanneer een gebruiker op een link klikt. Soms kan zelfs een vertraging van één seconde worden verminderd - Mozilla Developer Network"
De syntaxis is als volgt:
Documentatie:De hyperlink-login is zichtbaar.
Voorspanning voorgeladen
De preloadwaarde van de element-eigenschap stelt je in staat een fetch-verzoek in HTML te declareren, waarbij de resources worden gespecificeerd die de pagina binnenkort nodig heeft, en je wilt vroeg in de levensduur van de pagina beginnen met laden, voordat het hoofdrenderingsmechanisme van de browser start. Dit zorgt ervoor dat ze eerder beschikbaar zijn en minder snel de weergave van de pagina blokkeren, wat de prestaties verbetert. Zelfs als de naam de term load bevat, laadt en voert het het script niet uit, maar plant het alleen in om te downloaden en te cachen met een hogere prioriteit.
Preload is een nieuwe webstandaard die bepaalt hoe specifieke resources worden geladen, een upgrade van de subresource prefetch, die in januari 2016 werd afgeschaft. Dit commando kan <link> bijvoorbeeld worden gebruikt in <link rel="preload">. Over het algemeen is het het beste om preload te gebruiken om je belangrijkste bronnen te laden, zoals afbeeldingen, CSS, JavaScript en lettertypebestanden. Dit moet niet worden verward met browserpreloading, dat alleen bronnen vooraf laadt die in HTML zijn aangegeven. De preload-richtlijn overwint deze beperking eigenlijk en maakt het mogelijk om bronnen vooraf te laden die in CSS en JavaScript zijn gedefinieerd, en maakt beslissingen mogelijk over wanneer elke resource wordt toegepast.
Preload verschilt van prefetch doordat het zich richt op de huidige pagina en resources laadt met hoge prioriteit, terwijl Prefetch zich richt op de resource die de volgende pagina zal laden en met lage prioriteit laadt. Let ook op dat preload het onload-event van het venster niet blokkeert.
Veel verschillende contenttypes kunnen vooraf worden geladen. De mogelijke als eigenschappenwaarden zijn:
audio: Een audiobestand, meestal gebruikt voor <audio>.
document: 旨在由<frame>或嵌入的 HTML 文档<iframe>。
Embed: De resource die in het element moet worden ingebed<embed>.
fetch: Een resource die benaderd kan worden via fetch of XHR-verzoek, zoals een ArrayBuffer- of JSON-bestand.
font: 字体文件。
afbeelding: Afbeeldingsbestand.
object: De bron die in het element moet worden ingebed<object>.
script: JavaScript 文件。
style: CSS 样式表。
track: WebVTT 文件。
worker: Een JavaScript-webworker of gedeelde worker.
Video: een videobestand, meestal gebruikt voor <video>.
De syntaxis is als volgt:
Documentatie:De hyperlink-login is zichtbaar.
|
Geplaatst op 26-09-2022 21:45:08
|
|
|
|
Geplaatst op 28-09-2022 08:54:26
|
