Para sitios web con un gran número de visitas, la optimización del front-end es imprescindible. Incluso optimizar el tamaño de 1 KB tendrá un gran impacto en ello. Echemos un vistazo a la optimización del front-end HTML5 de la plataforma de telefonía móvil de ISUX. Quizás sea útil e inspirador para usted.
Descripción general
- Los métodos de optimización de PC también son aplicables en el lado móvil.
- En el lado móvil, proponemos un indicador de finalización de renderizado de tres segundos para la primera pantalla.
- Basado en el segundo punto, la primera pantalla se carga en 3 segundos o usando Cargando
- Según el promedio de 338 KB/s (2,71 Mb/s) de la red 3G de China Unicom, el recurso de la primera pantalla no debe exceder los 1014 KB.
- En el lado móvil, debido a razones de configuración del teléfono móvil, además de la carga, la velocidad de renderizado también es el foco de la optimización.
- Según el quinto punto, el código debe procesarse de manera razonable para reducir la pérdida de renderizado.
- Según los puntos segundo y quinto, todo el código que afecta la carga y representación de la primera pantalla debe colocarse detrás de la lógica de procesamiento.
- Una vez completada la carga, los usuarios también deben prestar atención al rendimiento al interactuar entre sí.
Guía de optimización
[Optimización de carga]
El proceso de carga es el proceso que consume más tiempo y puede representar el 80% del tiempo total, por lo que es el foco de la optimización.
Reducir las solicitudes HTTP.
Debido a que los navegadores móviles responden a 4 solicitudes al mismo tiempo (Android admite 4, iOS 5 y posteriores pueden admitir 6), es necesario reducir la cantidad de solicitudes de la página tanto como sea posible. las solicitudes para la primera carga no pueden exceder 4 a)
Fusionar CSS, JavaScript
b) Combinar imágenes pequeñas y usar imágenes de sprites
Caché
El uso de caché puede reducir la cantidad de solicitudes al servidor y ahorrar tiempo de carga, por lo que todos los recursos estáticos deben almacenarse en caché en el lado del servidor e intentar usar caché largo (se pueden usar marcas de tiempo para actualizar recursos de caché largos) a ) Almacenar en caché todo
lo que se puede almacenar en caché Recursos b) Usar caché largo (actualizar el caché usando la marca de tiempo) c) Usar referencias fuera de línea a CSS y JavaScript
Comprimir HTML, CSS, JavaScript
para reducir el tamaño del recurso puede acelerar la visualización de la página web, por lo que la compresión del código se debe realizar en HTML, CSS, JavaScript, etc., y configurar GZip en el lado del servidor a)
Compresión (por ejemplo, espacios adicionales, nuevas líneas y sangrías)
b) Habilitar GZip
El JavaScript sin bloqueo
escrito en el encabezado HTML (no asincrónico) y el Estilo escrito en etiquetas HTML bloquearán la representación de la página. Por lo tanto, CSS se coloca en el encabezado de la página y se introduce mediante Enlace para evitar escribir Estilo y JavaScript en HTML. Etiquetas Poner al final de la página.
O utilice la carga asincrónica.
Utilice la primera pantalla para cargar
. La visualización rápida de la primera pantalla puede mejorar en gran medida la percepción del usuario sobre la velocidad de la página. Por lo tanto, debe hacer todo lo posible para optimizar la visualización rápida de la primera pantalla.
Carga bajo demanda. Cargar
recursos que no afectan la primera pantalla y recursos que no se utilizan actualmente en la pantalla actual hasta que el usuario los necesite puede mejorar en gran medida la velocidad de visualización de recursos importantes y reducir el tráfico general. PD: La carga bajo demanda lo hará causar una gran cantidad de redibujos y afectar el renderizado
Rendimiento
a) LazyLoad
b) Carga de desplazamiento
c) Carga a través de Media Query
Precargar
Las páginas grandes con muchos recursos (como juegos) pueden usar el método de agregar Carga y luego mostrar la página una vez cargados los recursos. Sin embargo, si el tiempo de carga es demasiado largo, provocará la pérdida del usuario.
Para el análisis del comportamiento del usuario, la siguiente página de recursos se puede cargar en la página actual para mejorar la velocidad.
a) Carga perceptible (como la carga en juegos espaciales)
b) Carga invisible (como carga anticipada) Página siguiente)
Imágenes comprimidas
Las imágenes son los recursos que ocupan más tráfico, así que trate de evitar su uso, al usarlas, elija el formato más apropiado (juzgue por tamaño según la premisa de cumplir con los requisitos), el tamaño apropiado y luego use Zhitu compresión y úselo en el código Srcset para mostrar PS on demand
: la compresión excesiva del tamaño de la imagen afecta el efecto de visualización de la imagen
a) Use Zhitu ( http://zhitu.tencent.com/ )
b) Use otros métodos para reemplazar imágenes (1. Utilice CSS3 2. Utilice SVG 3. Utilice IconFont)
c) Utilice Srcset
d) Elija la imagen adecuada (1. webP es mejor que JPG 2. PNG8 es mejor que GIF)
e) Elija el tamaño adecuado (1. Primero la carga no supera los 1014 KB 2. No supera los 640 (basado en el ancho de pantalla normal del teléfono móvil))
Reducir las cookies
Las cookies afectarán la velocidad de carga, por lo que los nombres de dominio de recursos estáticos no utilizan cookies
Evite la redirección.
La redirección afectará la velocidad de carga, así que configúrela correctamente en el servidor para evitar la redirección.
Carga asincrónica de recursos de terceros.
Los recursos de terceros incontrolables afectarán la carga y visualización de la página, por lo que los recursos de terceros deben cargarse de forma asincrónica.
[Optimización de la ejecución del script]
El manejo inadecuado de los scripts bloqueará la carga y representación de la página, por lo que cuando lo use, debe prestar atención a escribir CSS al principio y JavaScript al final o de forma asincrónica.
Evite Src vacío para imágenes e iFrames.
Src vacío recargará la página actual, afectando la velocidad y la eficiencia.
Intente evitar cambiar el tamaño de la imagen.
Cambiar el tamaño de la imagen se refiere a cambiar el tamaño de la imagen varias veces en la página, CSS, JavaScript, etc. Cambiar el tamaño de la imagen varias veces hará que la imagen se vuelva a dibujar varias veces, lo que afectará el rendimiento.
Intente evitar el uso de DataURL para imágenes.
Las imágenes de DataURL que no utilizan el algoritmo de compresión de imágenes harán que el archivo sea más grande y será necesario decodificarlo antes de renderizarlo, lo que hace que la carga sea lenta y requiera mucho tiempo.
[Optimización CSS]
Intente evitar escribir el atributo Estilo en etiquetas HTML
Evite las expresiones CSS.
La ejecución de las expresiones CSS debe saltar de la representación del árbol CSS, así que evite las expresiones CSS.
Eliminar reglas CSS vacías.
Las reglas CSS vacías aumentan el tamaño de los archivos CSS y afectan la ejecución del árbol CSS, por lo que es necesario eliminar las reglas CSS vacías.
Uso correcto de los atributos de visualización.
Los atributos de visualización afectarán la representación de la página, así que úselos de manera razonable.
a) ancho, alto, margen, relleno y flotante no deben usarse después de display:inline.
b) flotante no debe usarse después display:inline-block.
c ) La alineación vertical no debe usarse después de display:block
d) El margen o el flotador no deben usarse después de display:table-*
No abuses de Float.
Float requiere muchos cálculos al renderizar, así que úsalo lo menos posible.
No abuse de las fuentes web.
Las fuentes web deben descargarse, analizarse y volverse a dibujar en la página actual. Utilícelas lo menos posible.
No declare demasiados tamaños de fuente.
Demasiados tamaños de fuente causan la eficiencia del árbol CSS.
No se requiere ninguna unidad cuando el valor es 0.
Para la compatibilidad y el rendimiento del navegador, no se requiere ninguna unidad cuando el valor es 0.
Estandarizar varios prefijos del navegador
a) No se debe colocar ningún prefijo al final
b) Las animaciones CSS solo usan dos tipos (-webkit- sin prefijo)
c) Otros prefijos son -webkit- -moz- -ms- sin prefijo y cuatro tipos. ( -o-El navegador Opera cambia al kernel parpadeante, por lo que se elimina)
Evite hacer que los selectores parezcan expresiones regulares.
Los selectores avanzados tardan mucho en ejecutarse y son difíciles de leer. Evite usarlos.
[Optimización de la ejecución de JavaScript]
Reduzca el redibujado y el reflujo
a) Evite operaciones Dom innecesarias
b) Intente cambiar Clase en lugar de Estilo, use classList en lugar de className
c) Evite usar document.write
d) Reduzca drawImage
Selección y cálculo de Cache Dom.
Cada selección de Dom debe calcularse y almacenarse en caché.
La longitud de la lista de caché
debe calcularse cada vez y se utiliza una variable para guardar este valor.
Intente utilizar servidores proxy de eventos para evitar la vinculación de eventos por lotes
Intente utilizar el selector de ID.
El selector de ID es el más rápido.
Optimización de eventos TOUCH
Utilice touchstart y touchend en lugar de hacer clic, porque tienen un impacto más rápido. Sin embargo, cabe señalar que la respuesta táctil es demasiado rápida, lo que fácilmente puede provocar un mal funcionamiento.
[Optimización de renderizado]
HTML utiliza Viewport
Viewport puede acelerar la representación de la página, utilice el siguiente código
<meta name=”viewport” content=”width=device-width, initial-scale=1″>Reducir los nodos Dom.
Demasiados nodos Dom afectan la representación de la página. Los nodos Dom deben reducirse tanto como sea posible.
Optimización de la animación
a) Utilice la animación CSS3 tanto como sea posible
b) Utilice correctamente la animación requestAnimationFrame en lugar de setTimeout
c) Uso adecuado de la animación Canvas Utilice la animación CSS dentro de 5 elementos y utilice la animación Canvas para más de 5 elementos (webGL se puede utilizar para iOS8 )
Optimización de eventos de alta frecuencia
Los eventos Touchmove y Scroll pueden provocar múltiples renderizados
a) Utilice requestAnimationFrame para monitorear los cambios de fotogramas para que el renderizado se pueda realizar en el momento correcto
b) Aumente el intervalo de tiempo para responder a los cambios y reduzca el número de redibujos
La GPU acelera
las siguientes propiedades en CSS (transiciones CSS3, transformaciones CSS3 3D, opacidad, lienzo, WebGL, vídeo) para activar el renderizado de la GPU; úselas con prudencia.
PD: el uso excesivo provocará un consumo excesivo de energía del teléfono móvil.
Autor: Mi Suisui Texto original: Tencent ISUX ( 404 )