¿Cuáles son los métodos comunes de optimización del rendimiento del front-end? ¿cuánta ganancia habrá?
El front-end es enorme e incluye HTML, CSS, Javascript, Image, Flash y otros recursos diversos. La optimización front-end es compleja y existen diferentes métodos para todos los aspectos de los recursos. Entonces, ¿cuál es el propósito de la optimización front-end?
1. Desde la perspectiva del usuario, la optimización puede hacer que la página se cargue más rápido, responda a las operaciones del usuario de manera más oportuna y brinde a los usuarios una experiencia 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, lo que puede ahorrar recursos considerables.
En resumen, una optimización adecuada no sólo puede mejorar la experiencia del usuario del sitio sino también ahorrar una considerable utilización de recursos.
Hay muchas formas de optimizar el front-end, que se pueden dividir aproximadamente en dos categorías según la granularidad. La primera categoría es la optimización a nivel de página, como la cantidad de solicitudes HTTP y la carga sin bloqueo. de scripts, optimización de posición de scripts en línea, etc. La segunda categoría es la optimización a nivel de código, como la optimización de la operación DOM en Javascript, la optimización del selector CSS, la optimización de imágenes, la optimización de la estructura HTML, etc. Además, con el fin de mejorar la relación entrada-salida, las diversas estrategias de optimización mencionadas más adelante se organizan aproximadamente de mayor a menor relación entrada-salida.
1. Optimización a nivel de página
1. Reducir la cantidad de solicitudes HTTP
Esta estrategia es básicamente conocida por todas las personas del front-end, y lo es. también el más importante y eficaz. Se dice que las solicitudes HTTP deberían reducirse, pero ¿qué pasará si hay demasiadas solicitudes? En primer lugar, cada solicitud tiene un costo, que incluye tanto el costo de tiempo como el costo de recursos. Una solicitud completa requiere un proceso "largo" y complicado 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 los usuarios tienen que esperar a que finalice el proceso para ver o "sentir" el recurso. Dado que cada solicitud en el recurso necesita transportar datos, cada solicitud requiere ancho de banda. Además, dado que existe un límite superior en la cantidad de solicitudes simultáneas que el navegador puede realizar (consulte aquí para obtener más detalles), cuando aumenta la cantidad de solicitudes, el navegador debe realizar solicitudes en lotes, lo que aumentará el tiempo de espera del usuario. y causar problemas al sitio web del usuario. La impresión de velocidad lenta es que incluso si se han solicitado todos los recursos en la primera pantalla que el usuario puede ver, la barra de progreso del navegador siempre existirá.
Las principales formas de reducir el número de solicitudes HTTP incluyen:
(1) Simplificar la página desde el nivel de diseño e implementación.
Si su página lo es. Tan simple como la página de inicio de Baidu, entonces las siguientes reglas son básicamente innecesarias. Lo más sencillo es mantener la página simple y reducir el uso de recursos. Si no es así y tu página necesita una apariencia hermosa, continúa leyendo a continuación.
(2). Configurar correctamente la caché HTTP
El poder de la caché es poderoso y una configuración de caché adecuada puede reducir en gran medida las solicitudes HTTP. Tome la página de inicio de Youah como ejemplo. Cuando el navegador no la almacena en caché, se emitirán 78 solicitudes por primera vez y se enviarán más de 600 000 datos (como se muestra en la Figura 1.1). para la segunda visita, solo hay 10 solicitudes de acceso y más de 20.000 datos (Figura 1.2). (Cabe señalar aquí que si actualiza la página directamente con F5, el efecto será diferente. En este caso, el número de solicitudes sigue siendo el mismo, pero el servidor de solicitudes para el recurso almacenado en caché es una respuesta 304. Solo el El encabezado no tiene cuerpo, lo que puede ahorrar ancho de banda)
¿Cuál es una configuración razonable? El principio es muy 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 largo a través de Expires en el encabezado HTTP que cambian con poca frecuencia pero pueden cambiar y pueden usar Last-Modifed para la verificación de la solicitud. Mantenga los recursos en la caché el mayor tiempo posible.
Las configuraciones y principios específicos del almacenamiento en caché HTTP no se describirán en detalle aquí. Aquellos que estén interesados pueden consultar los siguientes artículos:
Descripción de las estrategias de almacenamiento en caché en el protocolo HTTP1.1
. Fiddler Introducción al almacenamiento en caché en el rendimiento HTTP
(3). Fusión y compresión de recursos
Si es posible, combine scripts y estilos externos tanto como sea posible y combine varios en uno. Además, CSS, Javascript e Image se pueden comprimir utilizando las herramientas correspondientes. Después de la compresión, a menudo se puede ahorrar mucho espacio.
(4). CSS Sprites
Fusionar imágenes CSS, otra buena forma de reducir el número de solicitudes.
(5). Imágenes en línea
Utilice el esquema de URL de datos para incrustar imágenes en la página o CSS. Si no considera problemas de administración de recursos, es un buen método. . Si está incrustado en la página, el tamaño de la página aumentará y no se podrá utilizar la memoria caché del navegador. Las imágenes utilizadas en CSS son más ideales.
(6). Carga diferida de imágenes (todavía no entiendo el contenido de esta sección)
Es posible que esta estrategia en realidad no reduzca la cantidad de solicitudes HTTP, pero puede reducirlas. el número de solicitudes HTTP bajo ciertas condiciones o cuando la página se carga por primera vez. Para las imágenes, puede cargar solo la primera pantalla cuando la página se carga por primera vez y solo cargar las imágenes posteriores cuando 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 guardarán las solicitudes de imágenes restantes. Sí, la página de inicio solía hacer esto almacenando en caché las direcciones de las imágenes después de la primera pantalla en la etiqueta Textarea al cargar, y cargándolas "perezosamente" cuando el usuario se desplaza hacia abajo.
2. Coloque el script externo en la parte inferior (cargue el contenido del script después de que se cargue el contenido de la información de la página)
Como se mencionó anteriormente, el navegador puede realizar solicitudes simultáneas. Esta característica. le permite cargar recursos más rápido, sin embargo, los scripts de enlaces externos bloquearán otros recursos durante la carga. Por ejemplo, antes de que se cargue el script, las imágenes, estilos y otros scripts detrás de él se bloquearán hasta que se cargue el script. Si el script se coloca en una posición relativamente alta, afectará la velocidad de carga de toda la página y, por lo tanto, afectará la experiencia del usuario. Hay muchas formas de resolver este problema, que se presentan con más detalle aquí (aquí está la traducción y ejemplos más detallados), y el método más simple y confiable es mover el script lo más atrás posible para reducir el impacto en la concurrencia. descargas.
3. Ejecute scripts en línea de forma asincrónica (de hecho, el principio es el mismo que el anterior, asegurando que el script se cargue después del contenido de la página).
En comparación con los scripts externos, el El impacto de los scripts en línea en el rendimiento es peor que eso. La página de inicio, al igual que los scripts externos, los scripts en línea también bloquearán las solicitudes concurrentes cuando se ejecuten. Además, dado que el navegador tiene un solo subproceso en el procesamiento de la página, cuando el script en línea se ejecuta antes de que se represente la página, el trabajo de representación de la página se pospondrá. . En resumen, cuando se ejecuta el script en línea, la página está en blanco. En vista de las dos razones anteriores, se recomienda ejecutar scripts en línea que tardan mucho en ejecutarse de forma asincrónica. Hay muchos métodos asincrónicos, como el uso del atributo defer del elemento de secuencia de comandos (existen problemas de compatibilidad, como). ya que document.write no se puede usar), usando setTimeout, además, se introdujo el mecanismo Web Workers en HTML5, que puede resolver este tipo de problema.
4. Javascript de carga diferida (solo se carga cuando es necesario cargarlo, el contenido de la información no se carga en circunstancias normales).
Con la popularidad de los marcos de Javascript, cada vez más sitios también utiliza marcos. Sin embargo, un marco a menudo incluye muchas implementaciones funcionales. Estas funciones no son necesarias para todas las páginas. Si descarga scripts innecesarios, es una pérdida de recursos: desperdicia ancho de banda y tiempo de ejecución.
Actualmente existen dos enfoques: uno es personalizar una versión mini dedicada del marco para páginas con tráfico particularmente alto y el otro es Lazy Load. YUI utiliza el segundo método. En la implementación de YUI, inicialmente solo se carga el módulo principal y otros módulos pueden esperar hasta que sean necesarios.
5. Coloque CSS en HEAD
Si coloca CSS en otros lugares como BODY, el navegador puede comenzar a representar la página antes de descargar y analizar el CSS, lo que provoca la aparición de la página. saltar del estado sin CSS al estado CSS y la experiencia del usuario es deficiente. Además, algunos navegadores solo comenzarán a representar la página después de que se complete la descarga del CSS. Si el CSS se coloca en una posición inferior, el navegador retrasará el tiempo de procesamiento.
6. Devolución de llamada de solicitud asincrónica (es decir, extraer algunos estilos de comportamiento y cargar lentamente el contenido de la información)
En algunas páginas, puede existir tal requisito y es necesario hacerlo. utilice la etiqueta script para solicitar datos de forma asincrónica. Similar:
Javascript:
función myCallback(info){
//hacer algo aquí
}
HTML:
Contenido devuelto por cb:
myCallback('¡Hola mundo!');
Escribe