¿Cuáles son las herramientas comunes de optimización del rendimiento del front-end? ¿Qué tan altos son sus retornos?
1. Desde la perspectiva del usuario, la optimización puede hacer que la página se cargue más rápido, responda mejor a las operaciones del usuario y proporcione una experiencia de usuario más amigable.
2. Desde la perspectiva del proveedor de servicios, la optimización puede reducir la cantidad de solicitudes de página o reducir el ancho de banda ocupado por las solicitudes, ahorrando así muchos recursos.
En resumen, una optimización adecuada no sólo puede mejorar la experiencia del usuario del sitio web, sino también ahorrar muchos recursos.
Hay muchas formas de optimizar la interfaz, que se pueden dividir aproximadamente en dos categorías según la granularidad. La primera es la optimización a nivel de página, como la cantidad de solicitudes HTTP, la carga de scripts sin bloqueo, la optimización de las posiciones de los scripts en línea, etc., la segunda es la optimización a nivel de código, como la optimización de las operaciones DOM en Javascript, la optimización; de selectores CSS, optimización de imágenes, etc. Optimización de estructura HTML, etc. Además, para mejorar la relación entrada-salida, las diversas estrategias de optimización mencionadas más adelante se ordenarán de mayor a menor relación entrada-salida.
1. Optimización a nivel de página
1. Reducir el número de solicitudes HTTP
Esta estrategia es básicamente conocida por todo el personal de front-end y también es la Estrategia más importante y más importante. Todos hablan de reducir la cantidad de solicitudes HTTP, pero ¿qué sucede cuando las solicitudes aumentan? Primero, cada solicitud cuesta tiempo y recursos. Una solicitud completa debe pasar por el "largo" y complicado proceso de direccionamiento DNS, establecer una conexión con el servidor, enviar datos, esperar a que el servidor responda y recibir datos. El costo de tiempo es que el usuario necesita ver o "sentir" que el recurso necesita esperar a que finalice el proceso. Debido a que el recurso necesita transportar datos con cada solicitud, cada solicitud requiere ancho de banda. Además, el navegador tiene un límite en la cantidad de solicitudes simultáneas (ver aquí), por lo que si hay muchas solicitudes, el navegador necesita agruparlas en lotes, lo que aumentará el tiempo de espera para el usuario y hará que el sitio web sea más lento. para el usuario La impresión es que incluso si se han solicitado los primeros recursos de pantalla que el usuario puede ver, la barra de progreso del navegador siempre existirá.
Los principales métodos para reducir el número de solicitudes HTTP incluyen:
(1) Simplificar la página a nivel de diseño e implementación.
Si su página lo es. Tan simple como la página de inicio de Baidu, las siguientes reglas son básicamente innecesarias. Es muy sencillo mantener su página simple y minimizar el uso de recursos. Si ese no es el caso y tu página necesita una apariencia hermosa, sigue leyendo a continuación.
(2). Almacenamiento en caché HTTP correcto
El almacenamiento en caché es potente y una configuración de caché correcta puede reducir en gran medida las solicitudes HTTP. Tomando la página de inicio de Youah como ejemplo, cuando el navegador no realiza acceso a la caché, un solo ataque emitirá 78 solicitudes y atacará más de 600 000 datos (Figura 1.1). Ya ha accedido a él. Solo se realizaron 10 solicitudes después del acceso al caché, *** más de 20 000 datos (Figura 1.2). (Cabe señalar aquí que si usa F5 directamente para actualizar la página, el efecto será diferente. En este caso, el número de solicitudes sigue siendo el mismo, pero la solicitud de recursos almacenada en caché por el servidor es una respuesta 304, solo el encabezado y no el cuerpo, lo que puede ahorrar ancho de banda)
¿Cuál es una configuración razonable? El principio es simple: cuanto más caché pueda, mejor, y cuanto más tiempo pueda almacenarse en caché, mejor. Por ejemplo, los recursos de imagen que rara vez cambian pueden establecer directamente un encabezado de vencimiento prolongado a través de HTTP Header Expires que cambian con poca frecuencia y pueden cambiar y pueden usar Last-Modifed para la verificación de solicitudes. Mantenga los recursos en caché durante el mayor tiempo posible.
Las configuraciones y principios específicos del almacenamiento en caché HTTP no se describirán en detalle aquí. Los amigos interesados pueden consultar los siguientes artículos:
Descripción de las estrategias de almacenamiento en caché en el protocolo HTTP1.1
Fiddler HTTP. rendimiento Introducción al almacenamiento en caché en
(3). Fusión y compresión de recursos
Si es posible, combine scripts y estilos externos tanto como sea posible, y combine varios scripts y estilos en uno. Además, CSS, Javascript y las imágenes se pueden comprimir con las herramientas adecuadas y la compresión suele ahorrar mucho espacio.
(4).CSS Sprites
Fusionar imágenes CSS es otra excelente manera de reducir la cantidad de solicitudes.
(5). Imágenes en línea
Utilice el esquema data.URL para incrustar imágenes en la página: el esquema de URL es una buena forma de incrustar imágenes en la página o CSS sin considerarlo. gestión de recursos. Incrustar imágenes en una página aumenta el tamaño de la página y evita el almacenamiento en caché del navegador. Usar imágenes en CSS es aún más ideal.
(6). Carga diferida de imágenes (todavía no sé mucho sobre esto)
Esta estrategia no necesariamente reduce la cantidad de solicitudes HTTP, pero puede hacerlo en ciertas condiciones. condiciones Reduzca la cantidad de solicitudes HTTP al descargar o cargar una página por primera vez. Para las imágenes, puede cargar solo la primera pantalla cuando se carga la página por primera vez y luego cargar las imágenes posteriores a medida que el usuario continúa desplazándose hacia atrás. De esta forma, si al usuario sólo le interesa el contenido de la primera pantalla, se pueden omitir las solicitudes de imágenes restantes. La forma en que solíamos hacerlo en la página de inicio era almacenar en caché las direcciones de las imágenes después de la primera pantalla en una etiqueta Textarea al cargar, y luego cargarlas "de forma diferida" a medida que el usuario se desplazaba hacia abajo en la pantalla.
2. Coloque scripts externos en la parte inferior (cargue el script después de cargar la información de la página)
La sección anterior presentó cómo el navegador puede realizar solicitudes simultáneas. Esta función permite al navegador. Cargue recursos más rápido. Sin embargo, los scripts externos pueden bloquear otros recursos durante la carga. Por ejemplo, las imágenes, los estilos y otros scripts detrás de ellos se bloquean hasta que se carga el script y no comenzarán a cargarse hasta que se cargue el script. Si el script se coloca en la posición frontal, afectará la velocidad de carga de toda la página, afectando así la experiencia del usuario. Hay muchas maneras de resolver este problema, que se cubrirán con más detalle aquí (aquí hay una traducción y un ejemplo más detallado), pero la forma más simple y confiable es mover el script lo más atrás posible para minimizar el impacto en descargas simultáneas.
3. Ejecute scripts en línea de forma asincrónica (el mismo principio que el anterior, asegúrese de que el script se cargue después del contenido de la página).
Los scripts integrados tienen un impacto aún mayor en el rendimiento que los scripts externos. Primero, al igual que los scripts externos, los scripts en línea también bloquean las solicitudes concurrentes durante la ejecución. Además, dado que los navegadores tienen un solo subproceso en términos de procesamiento de páginas, cuando los scripts en línea se ejecutan antes de que se procese la página, la representación de la página se retrasará. En resumen, los scripts en línea se ejecutan cuando la página está en blanco. Por estas dos razones, se recomienda ejecutar scripts en línea de larga duración de forma asincrónica; hay muchas formas de hacerlo, como usar el atributo defer del elemento script (existen problemas de compatibilidad y otros problemas, como la imposibilidad de usar document.write), usando setTimeout y el mecanismo WebWorkers introducido en HTML5. El mecanismo de trabajadores introducido en HTML5 es precisamente para resolver este tipo de problemas.
4. Carga diferida de Javascript (solo se carga cuando es necesario y el contenido de la información no se carga en circunstancias normales).
Con la popularidad de los frameworks Javascript, cada vez más sitios web están empezando a utilizarlos. Sin embargo, un marco a menudo contiene muchas implementaciones de funcionalidades que no todas las páginas requieren, y descargar scripts innecesarios es un desperdicio de recursos, tanto en términos de ancho de banda como de tiempo dedicado a ejecutar los scripts. Hay dos formas de hacer esto, una es personalizar una versión mini del marco para páginas con mucho tráfico y la otra es utilizar carga diferida (Lazy Load). YUI utiliza el segundo enfoque, donde inicialmente solo se cargan los módulos principales y otros módulos pueden esperar hasta que sean necesarios.
5. Coloque CSS en HEAD
Si coloca CSS en otro lugar (como BODY), el navegador puede comenzar a representar la página antes de descargar y analizar el CSS, lo que provocará que la página se bloquee. saltar de un estado sin CSS a un estado con CSS, brindando así a los usuarios una mala experiencia. Además, algunos navegadores esperarán hasta que se descargue el CSS antes de comenzar a renderizar la página, lo que puede hacer que el navegador retrase la renderización si el CSS se coloca más abajo.
6. Devolución de llamada de solicitud asincrónica (es decir, extraer parte del estilo de comportamiento y cargar lentamente el contenido de la información)
En algunas páginas, es posible que necesite utilizar etiquetas de secuencia de comandos para solicitar datos. asincrónicamente. De manera similar:
Javascript:
función myCallback(info){
//hacer algo aquí
}
HTML:
cb return content:
myCallback( '¡Hola mundo!');
También puedes escribir