¿Cómo pueden los principiantes en el front-end web optimizar el rendimiento?
El artículo que quiero compartir con ustedes hoy trata sobre cómo los principiantes en el front-end web pueden optimizar el rendimiento. La parte más importante que afecta el acceso de los usuarios es la página de front-end. Los sitios web generalmente se dividen en dos partes: front-end y back-end. Podemos entender que el backend se utiliza para implementar las funciones del sitio web, como realizar el registro de usuarios, permitir a los usuarios comentar artículos, etc. ¿Qué pasa con la interfaz? De hecho, debería ser una función de desempeño.
¿Cuál es el propósito de crear un sitio web? ¿No es solo permitir que el grupo objetivo lo visite? Para que podamos entender que el front-end es el contacto real con los usuarios.
Además de la optimización del rendimiento del backend, las páginas de front-end realmente necesitan trabajar más duro en la optimización del rendimiento. Solo así podemos brindar una mejor experiencia de usuario a nuestros usuarios. No solo eso, si el front-end está bien optimizado, no solo puede ahorrar costos para la empresa, sino que también puede atraer más usuarios debido a la experiencia de usuario mejorada. Dicho todo esto, ¿cómo debemos optimizar el rendimiento de nuestras páginas front-end?
¿Cómo optimizar el rendimiento del front-end?
Aspectos de contenido
1. Reducir las solicitudes HTTP: fusionar archivos, sprites CSS, inlineImage
2. Reducir las consultas DNS: el navegador no puede descargar ningún archivo de este host antes de que se complete la consulta DNS.
Métodos: almacenamiento en caché de DNS, distribución de recursos al número correcto de nombres de host, equilibrio de descargas paralelas y consultas de DNS
3, evitando redirecciones: acceso intermedio redundante
4, haciendo que Ajax esté disponible para almacenamiento en caché
p>
5, carga diferida de componentes no esenciales
6, precarga de componentes necesarios en el futuro
7, reducción del número de elementos DOM
8. Coloque recursos en diferentes dominios: el navegador puede descargar una cantidad limitada de recursos de un dominio al mismo tiempo. Aumentar los dominios puede aumentar la cantidad de descargas paralelas
9 y reducir la cantidad de iframes.
10, no 404
2. Aspecto del servidor
1. Utilice CDN
2. encabezado de respuesta
3, use compresión Gzip para componentes
4, configure ETag
5, FlushBufferEarly
6, Ajax usa GET para solicitudes
7, Evite etiquetas img con src vacío
3 Aspectos de las cookies
1. No reducir el tamaño de las cookies. incluir cookies en los nombres de dominio que introducen recursos
4. Aspectos CSS
1. Colocar la hoja de estilo en la parte superior de la página
2. Expresiones CSS
3. No utilice @ import
4. No utilice el filtro de IE
5. el script en la parte inferior de la página
2. Introduzca javascript y css desde el exterior
3, comprima javascript y css
4, elimine los scripts innecesarios
5, reduzca el acceso al DOM
6. Diseñe razonablemente los detectores de eventos,
6. Optimice las imágenes: seleccione la profundidad del color. y compresión según las necesidades de color reales
2. Optimice los sprites CSS
3. No estire las imágenes en HTML
4. Asegúrese de que favicon.ico sea pequeño. y almacenable en caché
7. Aspectos móviles
1. Asegúrese de que los componentes tengan menos de 25k
2. EmpaqueComponentsintoaMultipartDocument
Lo anterior es El artículo que el editor compartió con usted hoy sobre cómo los usuarios novatos del front-end web pueden optimizar el rendimiento. Espero que este artículo pueda ser útil para los amigos que trabajan en el front-end web. Si desea obtener más
conocimientos sobre el front-end web, recuerde prestar atención al sitio web oficial de la capacitación web de Beida Jade Bird. Por último, ¡les deseo a todos mucha suerte en su trabajo!