Inicio>Tutorial de diseño web>Tutorial HTML

Una breve discusión sobre las reglas básicas de optimización del rendimiento de las páginas web.

Autor：Eve Cole Fecha de actualización：2025-03-12 06:32:01

Algunas reglas de optimización para las páginas web del navegador.

Optimización de página

Compresión de recursos estáticos

Utilice herramientas de construcción (webpack, gulp) para comprimir adecuadamente los recursos estáticos de la página web, como imágenes, scripts y estilos.

Imágenes de sprites CSS, imágenes en línea base64

Fusione los íconos pequeños del sitio en una imagen, use CSS para posicionar e interceptar los íconos correspondientes; use imágenes en línea de manera adecuada.

Estilos en la parte superior y guiones en la parte inferior.

La página es un proceso de representación paso a paso. Pegar el estilo en la parte superior puede presentar la página al usuario más rápido; pegar la etiqueta <script> en la parte superior bloqueará la descarga de recursos detrás de la página.

Utilice css y js de enlaces externos

Varias páginas hacen referencia a recursos estáticos públicos y la reutilización de recursos reduce las solicitudes http adicionales.

Evite imágenes con src vacío

Evite solicitudes http innecesarias. 

 <!-- Las imágenes con src vacío seguirán iniciando solicitudes http--><img src= style="margin: 0px; padding: 0px; contorno: ninguno; line-height: 25.2px; font-size: 14px; width: 660px; desbordamiento: oculto; claro: ambos; familia de fuentes: tahoma, arial, Microsoft YaHei;"> 
 <!-- El tamaño real de la imagen es 600x300, que está escalado a 200x100 en html --><img src=/static/images/a.png width=200 height=100 style="margin: 0px; padding: 0px; contorno: ninguno; alto de línea: 25,2 px; tamaño de fuente: 14 px; ancho: 660 px; oculto; claro: ambos; familia de fuentes: tahoma, arial, Microsoft YaHei;"> 
 <!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Documento</title> <link ref=preload href=style.css as=style> <link ref=preload href =main.js as=script> <enlace ref=hoja de estilo href=style.css></head><body> <script src=main.js></script></body></html>
 En el ejemplo, los archivos css y js están precargados y se llamarán inmediatamente una vez que se utilicen en representaciones de páginas posteriores.
 Puede especificar el tipo de as para cargar diferentes tipos de recursos. 
  1.  estilo
  2.  guion
  3.  video
  4.  audio
  5.  imagen
  6.  fuente
  7.  documento
  8.  ...
 Este método también puede precargar recursos entre dominios configurando el atributo crossorigin. 
 <enlace rel=precarga href=fonts/cicle_fina-webfont.woff2 as=tipo de fuente=font/woff2 crossorigin=anonymous>
 CSS
 selector
 La prioridad de los selectores de mayor a menor es: 
  1.  selector de identificación
  2.  selector de clase
  3.  selector de etiquetas
  4.  selector adyacente 
 h1 + p{ margen superior: 15px }
 Selecciona el párrafo que aparece inmediatamente después del elemento h1. Los elementos h1 y p tienen un elemento principal común.
 selector de niños 
 h1 > fuerte {color:rojo;}
 selector de descendientes 
 h1em {color:rojo;}
 selector comodín
 selector de atributos 
 *[título] {color:rojo;}img[alt] {borde: 5px rojo sólido;}
 Selector de pseudoclase
 Experiencia de uso del selector: 
  1.  Priorizar los selectores de clases, que pueden reemplazar los selectores de etiquetas multicapa;
  2.  Utilice el selector de ID con precaución. Aunque es eficiente, es único en la página y no favorece la colaboración y el mantenimiento del equipo.
  3.  Haga un uso razonable de la herencia del selector;
  4.  Evite las expresiones CSS.
 Reducir el nivel de selectores.
 Según la prioridad del selector anterior, debe intentar evitar múltiples niveles de anidamiento de selectores, preferiblemente no más de 3 niveles. 
 .container .text .logo{ color: rojo }/*Cambiar a*/.container .text-logo{ color: rojo }
 Optimice los archivos de estilo de página y elimine los estilos no utilizados
 El navegador realizará coincidencias de estilos redundantes, lo que afectará el tiempo de renderizado. Además, los archivos de estilo excesivamente grandes también afectarán la velocidad de carga.
 Utilice la herencia CSS para reducir el tamaño del código
 Utilizando las propiedades heredables de CSS, el elemento principal establece el estilo y los elementos secundarios no necesitan configurarlo nuevamente.
 Los atributos heredables comunes incluyen: color, tamaño de fuente, familia de fuentes, etc., los atributos no heredables incluyen: posición, visualización, flotación, etc.
 Cuando el valor del atributo es 0, no se agrega ninguna unidad.
 Cuando el valor del atributo CSS es 0, no se puede agregar ninguna unidad para reducir la cantidad de código. 
 .text{ ancho: 0px; alto: 0px }/*Cambiar a*/.text{ ancho: 0;
 javascript
 Usar delegación de eventos
 Utilice la delegación de eventos para vincular eventos a múltiples elementos DOM similares. 
 <ul id=contenedor> <li clase=lista>1</li> <li clase=lista>2</li> <li clase=lista>3</li></ul> 
 // Manera irrazonable: vincular el evento de clic a cada elemento $('#container .list').on('click', function() { var text = $(this).text(); console. log(text); });//Método de delegación de eventos: utilice el mecanismo de difusión de eventos para delegar eventos al elemento principal $('#container').on('click', '.list', function() { var text = $(this ).texto(); consola.log(texto });
 Cabe señalar que, aunque el evento se puede delegar al documento cuando se utiliza la delegación de eventos, esto no es razonable, por un lado es fácil causar errores de juicio por el evento y el otro es que la eficiencia de búsqueda de la cadena de alcance es baja. El elemento principal más cercano debe seleccionarse como delegado.
 Además de un mejor rendimiento, el uso de la delegación de eventos también elimina la necesidad de vincular eventos a elementos DOM creados dinámicamente.
 Contenido DOM cargado
 Puede comenzar a procesar el árbol DOM después de que se carguen los elementos DOM (DOMContentLoaded), en lugar de esperar hasta que se descarguen todos los recursos de imagen. 
 // javascript nativo document.addEventListener(DOMContentLoaded, function(event) { console.log(DOM completamente cargado y analizado);}, false);// jquery$(document).ready(function() { console.log(ready ! );});// Versión simplificada de $(document).ready()$(function() { console.log(ready!);});
 Precarga y carga diferida
 precarga
 Utilice el tiempo de inactividad del navegador para precargar recursos que puedan usarse en el futuro, como imágenes, estilos y scripts.
 Precarga incondicional
 Una vez que se activa la carga, se obtienen inmediatamente los recursos que se necesitarán en el futuro.
 Los recursos de imagen están precargados. (3 formas de implementar la precarga de imágenes).
 Precarga basada en el comportamiento del usuario
 Juzgue las posibles operaciones del comportamiento del usuario y precargue los recursos que puedan ser necesarios en el futuro. 
  1.  Cuando el usuario escribe en el cuadro de entrada de búsqueda, se precargan los recursos que pueden usarse en la página de resultados de búsqueda;
  2.  Cuando el usuario opera una pestaña, una de ellas se mostrará de forma predeterminada. Al hacer clic en otras opciones, los recursos que se utilizarán en el futuro se pueden cargar primero cuando se pasa el mouse;
 Carga diferida
 Excepto el contenido o los componentes necesarios para la inicialización de la página, todo lo demás se puede cargar de forma diferida, como bibliotecas js que cortan imágenes, imágenes que no están en el rango visible, etc.
 Las imágenes se cargan de forma diferida. (Determine si la imagen está dentro del área visible; de ​​ser así, asigne la ruta real a la imagen)
 Evite la búsqueda global
 Cualquier variable no local utilizada más de una vez en una función debe almacenarse como variable local. 
 función updateUI(){ var imgs = document.getElementsByTagName(img); for (var i=0, len=imgs.length; i < len; i++){ imgs[i].title = document.title + image + i; } var msg = document.getElementById(msg.innerHTML = Actualización completa.;}
 La variable global del documento se usa muchas veces en la función anterior, especialmente en el bucle for. Por lo tanto, es una mejor solución almacenar las variables globales del documento como variables locales y luego usarlas. 
 función updateUI(){ var doc = documento; var imgs = doc.getElementsByTagName(img); for (var i=0, len=imgs.length; i < len; i++){ imgs[i].title = doc.title + imagen + i; } var msg = doc.getElementById(msg.innerHTML = Actualización completa.;}
 Una cosa que vale la pena señalar es que en el código JavaScript, cualquier variable que no se declare usando var se convertirá en una variable global y el uso inadecuado causará problemas de rendimiento.
 Evite consultas de atributos innecesarias
 Usar variables y matrices es más eficiente que acceder a las propiedades de un objeto porque el objeto debe buscar en la cadena de prototipos una propiedad con ese nombre. 
 //Usar valores var de matriz = [5, 10];var suma = valores[0] + valores[1];alert(suma);//Usar valores var de objeto = { primero: 5, segundo: 10 };var suma = valores.primero + valores.segundo;alerta(suma);
 En el código anterior, las propiedades del objeto se utilizan para calcular. Buscar propiedades una o dos veces no causará problemas de rendimiento, pero si se requieren búsquedas múltiples, como en un bucle, el rendimiento se verá afectado.
 Al buscar múltiples atributos para obtener un valor único, como: 
 consulta var = ventana.ubicación.href.substring(ventana.ubicación.href.indexOf(?));
 Se deben reducir las búsquedas de atributos innecesarias y window.location.href se debe almacenar en caché como una variable. 
 var url = ventana.ubicación.href;var consulta = url.substring(url.indexOf(?));
 función de estrangulamiento
 Supongamos que hay un cuadro de búsqueda, vincule el evento onkeyup al cuadro de búsqueda, de modo que se envíe una solicitud cada vez que se levante el mouse. El uso de funciones de limitación puede garantizar que múltiples operaciones consecutivas realizadas por el usuario dentro de un tiempo específico de entrada solo activen una solicitud. 
 <tipo de entrada=id de texto=valor de entrada= /> 
 // Evento de enlace document.getElementById('input').addEventListener('keyup', function() { throttle(search);}, false);// Función lógica function search() { console.log('search. . .');}// Función de aceleración function throttle(método, contexto) { clearTimeout(method.tId) método.tId = setTimeout(function() { método.call(context); }, 300);}
 Los escenarios de aplicación de la función de limitación no se limitan al cuadro de búsqueda. Por ejemplo, el desplazamiento de la página, el cambio de tamaño de la ventana ampliada, etc., la función de limitación se debe utilizar para mejorar el rendimiento.
 Minimizar el número de declaraciones
 El número de declaraciones también es un factor que afecta la velocidad de ejecución de la operación.
 Combine múltiples declaraciones de variables en una sola declaración de variables 
 // Utilice múltiples declaraciones de var var count = 5; var color = blue; var value = [1,2,3]; var now = new Date(); después de la mejora, var count = 5, color = blue , valores = [1,2,3], ahora = nueva Fecha();
 Una versión mejorada consiste en utilizar solo una declaración var, separada por comas. Cuando hay muchas variables, usar solo una declaración de var es mucho más rápido que declarar vars individuales por separado.
 Usando matrices y objetos literales
 Utilice matrices y objetos literales en lugar de asignaciones declaración por declaración. 
 valores var = new Array();valores[0] = 123;valores[1] = 456;valores[2] = 789;//Después de la mejora, valores var = [123, 456, 789]; 
 var person = new Object();person.name = Jack;person.age = 28;person.sayName = function(){ alert(this.name);};//Después de la mejora var person = { name: Jack, edad : 28, decirNombre : función(){ alerta(este.nombre }});
 Optimización de cadenas
 Concatenación de cadenas
 Los primeros navegadores no optimizaron la forma de concatenar cadenas con el signo más. Dado que las cadenas son inmutables, significa que se utilizan cadenas intermedias para almacenar resultados, por lo que la creación y destrucción frecuentes de cadenas es la razón de su ineficiencia. 
 var texto = Hola;texto+= ;texto+= ¡Mundo!;
 Agregue la cadena a la matriz y luego llame al método de unión de la matriz para convertirla en una cadena, evitando así el uso del operador de suma. 
 var arr = [], i = 0;arr[i++] = Hola;arr[i++] = ;arr[i++] = ¡Mundo!;var text = arr.join('');
 Los navegadores modernos han optimizado la concatenación de cadenas más signos, por lo que en la mayoría de los casos, el operador de suma sigue siendo la primera opción.
 Reducir los reflujos y los redibujados
 En el proceso de renderizado del navegador, están involucrados el reflujo y el redibujado, que es un proceso que consume rendimiento. Debe prestar atención a reducir las acciones que activan el reflujo y el redibujado durante las operaciones del script. 
  1.  Reflujo: las propiedades geométricas del elemento han cambiado y es necesario reconstruir el árbol de representación. El proceso de cambiar el árbol de renderizado se llama reflujo;
  2.  Redibujar: el tamaño geométrico del elemento no ha cambiado, pero el estilo CSS (color o color de fondo) de un elemento ha cambiado.
 ¿Qué operaciones desencadenan el reflujo o el redibujo? 
  1.  Cambiar tamaño de ventana
  2.  Modificar fuente
  3.  Agregar o quitar hojas de estilo
  4.  Cambios de contenido, como que el usuario ingrese texto en el cuadro <input/>
  5.  Manipular atributos de clase
  6.  Scripts para manipular DOM (agregar, eliminar o modificar elementos DOM)
  7.  Calcular las propiedades offsetWidth y offsetHeight
  8.  Establecer el valor del atributo de estilo.
 ¿Cómo reducir el reflujo y volver a dibujar y mejorar el rendimiento de la página web?
 1. Manipulación de scripts de elementos DOM. 
  1.  Configure el elemento DOM para mostrar: ninguno. Se activará un reflujo durante el proceso de configuración, pero puede cambiarlo a voluntad más adelante y mostrarlo después de la modificación;
  2.  Clone el elemento en la memoria antes de operarlo y reemplace el elemento nuevamente después de la modificación.
 2. Modificar el estilo del elemento. 
  1.  Intente realizar modificaciones por lotes en lugar de modificarlas una por una;
  2.  Establezca la identificación y la clase de antemano, y luego configure el nombre de clase del elemento.
 3. Al agregar animación a un elemento, establezca el estilo CSS del elemento en posición: fija o posición: absoluta. El elemento no provocará un reflujo después de abandonar el flujo del documento.
 4. Utilice la función de limitación (ya mencionada anteriormente) al ajustar el tamaño de la ventana, ingresar en el cuadro de entrada, desplazarse por la página, etc.
 HTTP
 caché del navegador
 Configurar correctamente la caché del navegador es uno de los medios importantes para optimizar una página web.
 Caduca y control de caché
 Expires proviene de HTTP1.0 y Cache-Control proviene de HTTP1.1. Cuando ambos se configuran al mismo tiempo, Cache-Control anulará Expires. 
  1.  Expires especifica la fecha de vencimiento real en lugar del número de segundos. Pero Expires tiene algunos problemas, como que la hora del servidor no está sincronizada o es inexacta. Por lo tanto, es mejor expresar el tiempo de vencimiento utilizando los segundos restantes en lugar del tiempo absoluto.
  2.  Cache-Control puede establecer el valor de antigüedad máxima en segundos y especificar el tiempo de vencimiento de la caché. Por ejemplo: Control de caché: edad máxima = 3600.
 ETag y última modificación
 El servidor devuelve tanto ETag como Last-Modified en los encabezados de respuesta. ETag tiene una prioridad más alta que Last-Modified, lo que significa que el servidor priorizará el valor de ETag. 
  1.  ETag es cualquier etiqueta adjunta al documento, que puede ser el número de serie o el número de versión del documento, o la verificación del contenido del documento, etc. Cuando el documento cambia, el valor de ETag también cambia. Relacionado con ETag está If-None-Match Cuando el navegador inicia una solicitud, llevará el valor de ETag en el campo If-None-Match y lo enviará al servidor;
  2.  Última modificación es la hora en la que el documento se modificó por última vez en el lado del servidor. Relacionado con Última modificación está If-Modified-Since Cuando el navegador inicia una solicitud, llevará el valor de Última modificación en el campo If-Modified-Since y lo enviará al servidor.
 Almacenamiento en caché fuerte y almacenamiento en caché negociado
 Los tipos de caché son caché fuerte y caché negociada. La diferencia entre los dos es que el caché seguro no enviará una solicitud al servidor, pero el caché negociado enviará una solicitud. Si la coincidencia es exitosa, devolverá 304 No modificado, si la coincidencia no es exitosa, devolverá. 200; el navegador primero verificará el caché seguro y, si falla el caché seguro, realizará la verificación del caché de negociación.
 Cómo configurar la caché del navegador 
  1.  Agregue Expires y Cache-Control a la respuesta de devolución del servidor web;
  2.  Configure Expires y Cache-Control en el archivo de configuración de nginx o apache.
 ¿Por qué reducir las solicitudes HTTP?
 Las medidas para reducir las solicitudes http representan una gran parte de la optimización del rendimiento, como: usar imágenes css sprite para reemplazar múltiples solicitudes de imágenes, evitar imágenes src vacías, usar imágenes en línea, usar enlaces externos css y js, almacenamiento en caché, etc.
 El proceso desde ingresar la URL hasta completar la carga de la página incluye: 
  1.  resolución DNS
  2.  conexión TCP
  3.  Solicitud y respuesta HTTP
  4.  El navegador muestra la página
  5.  estrecha conexión
 Una solicitud http completa debe pasar por estos procesos, lo que requiere mucho tiempo y recursos, por lo que es necesario reducir la cantidad de solicitudes.
 Referencias:
 "Guía avanzada para la construcción de sitios web de alto rendimiento frente a la construcción de sitios web de alto rendimiento"
 "Mejores prácticas para acelerar su sitio web"
 Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.
Artículos relacionados