Requisitos: Al solicitar un sitio web, necesitas cargar muchos recursos, las solicitudes de red también afectan a la velocidad de renderizado de la página web, cuando el usuario hace clic en la operación para cargar algunos recursos puede afectar a la experiencia del usuario, ahora que el rápido desarrollo de Internet, el ancho de banda y el tráfico ya no son tan caros, ¿cómo precargar recursos con antelación o establecer un enlace con el servidor objetivo de antemano?
Preconexión
La preconexión de palabras clave para propiedades de elementos es una pista para el navegador de que el usuario puede necesitar recursos de la fuente de destino para que el navegador pueda usarlosMejora la experiencia del usuario iniciando conexiones preventivas a esta fuente。
preconnect permite al navegador realizar varias acciones antes de que se envíe oficialmente una solicitud HTTP al servidor, incluyendo resolución DNS, negociación TLS y protocolo TCP, que elimina la latencia de ida y vuelta y ahorra tiempo al usuario.
La preconexión es un medio importante de optimización para reducir la ruta de ida y vuelta en muchas peticiones, en algunos casos por cientos o miles de milisegundos de latencia.
Aquí tienes un ejemplo de usar preconnect para Google Fonts, donde al añadir un prompt de preconnect a fonts.gstatic.com, el navegador iniciará inmediatamente una solicitud que se ejecutará en paralelo con la solicitud CSS. En este escenario, el preconexión elimina tres RTT (Tiempo de ida y vuelta) del camino crítico yLatencia reducida en más de medio segundo。
La sintaxis es la siguiente:
Documentación:El inicio de sesión del hipervínculo es visible.
DNS-prefetch usa DNS prefetch
La palabra clave dns-prefetch del atributo elemento es para alertar al navegador de que este puede necesitar un recurso de la fuente objetivo, para que el navegador pueda mejorar la experiencia del usuario realizando de forma preventiva la resolución DNS para esa fuente.
La prelectura DNS permite que el navegador esté en la página mientras el usuario navegaEjecutar resolución DNS en segundo plano。 De este modo, la resolución DNS se completa cuando el usuario hace clic en un enlace, por lo que la latencia puede reducirse. La prelectura DNS de una URL dada puede hacerse añadiendo rel="dns-prefetch' a las propiedades de una etiqueta de enlace; recomendamos manejar fuentes de Google, Google Analytics y CDN.
"Las solicitudes DNS tienen muy poco tráfico de ancho de banda, pero la latencia puede ser alta, especialmente en dispositivos móviles. El DNS especificado por prelectura puede reducir significativamente la latencia en ciertos escenarios, como cuando un usuario hace clic en un enlace. A veces, incluso un retraso de un segundo puede reducirse - Mozilla Developer Network"
La sintaxis es la siguiente:
Documentación:El inicio de sesión del hipervínculo es visible.
Precarga precargada
El valor de precarga de la propiedad del elemento te permite declarar una petición de obtención en HTML, especificando los recursos que la página necesitará pronto, y quieres empezar a cargar pronto en el ciclo de vida de la página, antes de que se inicie el mecanismo principal de renderizado del navegador. Esto garantiza que estén disponibles antes y que sea menos probable que bloqueen el renderizado de la página, mejorando el rendimiento. Aunque el nombre contenga el término carga, no carga ni ejecuta el script, sino que simplemente lo programa para descargar y almacenar en caché con mayor prioridad.
Preload es un nuevo estándar web que controla cómo se cargan recursos específicos, una actualización del prelectura de subrecursos, que fue desactualizado en enero de 2016. Este comando puede <link> usarse en , por ejemplo, <link rel="preload">. En general, lo mejor es usar preload para cargar tus recursos más importantes, como imágenes, CSS, JavaScript y archivos de fuentes. Esto no debe confundirse con la precarga del navegador, que solo precarga recursos declarados en HTML. La directiva de precarga en realidad supera esta limitación y permite precargar recursos definidos en CSS y JavaScript, además de decidir cuándo aplicar cada recurso.
Precarga se diferencia de la prelectura en que se centra en la página actual y carga recursos con alta prioridad, mientras que Prelectura se centra en el recurso que cargará la siguiente página y carga con baja prioridad. También ten en cuenta que la precarga no bloquea el evento de onload de la ventana.
Se pueden precargar muchos tipos de contenido diferentes. Los posibles valores de las propiedades son:
audio: Un archivo de audio, normalmente usado para <audio>.
document: 旨在由<frame>或嵌入的 HTML 文档<iframe>。
Embed: El recurso que se va a <embed>incrustar en el elemento.
fetch: Un recurso al que se accede mediante petición fetch o XHR, como un archivo ArrayBuffer o JSON.
font: 字体文件。
imagen: archivo de imagen.
objeto: El recurso que se va a <object>incrustar en el elemento.
script: JavaScript 文件。
style: CSS 样式表。
track: WebVTT 文件。
trabajador: Un trabajador web o trabajador compartido en JavaScript.
Vídeo: un archivo de vídeo, normalmente usado para <video>.
La sintaxis es la siguiente:
Documentación:El inicio de sesión del hipervínculo es visible.
|
Publicado en 26/9/2022 21:45:08
|
|
|
|
Publicado en 28/9/2022 8:54:26
|
