Hoy, comparto principalmente algunas soluciones prácticas para la optimización del rendimiento. Durante la pasantía en la empresa hace unos meses, resumí algunos proyectos reales a través de la revisión. Esto es para zapatos para niños que acaban de encontrar problemas de rendimiento en el front-end. Espero brindarles Alguna guía de nivel de entrada.
Hablando del tema de la optimización del rendimiento, es demasiado grande, no solo la optimización del rendimiento del front-end, sino también la optimización del rendimiento de todo el enlace. Coordinación de módulos front-end, back-end, servidor, red y otros.
Estoy trabajando en la optimización del rendimiento. Algunos de los puntos sobre la optimización del rendimiento son que el autor de "Front-end Performance Optimization", las palabras revisadas de Ali, me dio algunos consejos, además de la aplicación y los comentarios en el combate real, que me hicieron sentir algo. , Escribe el valor de la misma.
El alcance de la optimización del rendimiento compartido hoy también se basa en algunos de los negocios y pilas de tecnología utilizados por mi empresa anterior. Hay escenarios de optimización específicos, y es más interesante cuando hablamos de optimización del rendimiento.
Hacer frente a pilas y escenarios de tecnología
Si no es para empresas que tienen requisitos de pila de tecnología particularmente estrictos, estas pilas de tecnología son indispensables para el desarrollo de front-end. HTML5 + CSS3 + jQuery, algunas empresas todavía están usando JSP, .Net para desarrollar, para esta tecnología tradicional, necesitamos usar algunos medios especiales para optimizar.
Deshacerse de marcos como Vue que está abandonando la manipulación DOM tradicional y solo se centra en la optimización del rendimiento tradicional, ¿cómo empezamos?
PD: Este artículo no habla demasiado sobre la optimización del rendimiento del marco, solo a partir de los puntos tradicionales de optimización del rendimiento.
Comience con problemas de posicionamiento
Una vez, hubo un problema con un proyecto en línea. Tomó mucho tiempo para que se renderizara cierta parte de la página. ¿Qué salió mal?
El problema de posicionamiento, ¿qué provocó la carga lenta de parte del contenido de la página ?, ¿es el proceso de adquisición de datos, el proceso de carga de JS de la página u otros procesos de renderizado y dibujo?
Localice el problema a través del Rendimiento del artefacto comúnmente conocido como consola del navegador.
Aquí tomo un determinado sitio web como objeto de proyecto, como demostración.
Esa parte lleva mucho tiempo. A través de este diagrama, puede analizar qué enlace tiene un tiempo de renderizado más largo.
Después de localizar el problema, comience a optimizar. Pero la premisa de la optimización es especificar el contenido básico de la optimización; de lo contrario, no sabemos por dónde empezar la optimización.
El tiempo de solicitud de datos es demasiado largo
A veces, cuando estamos trabajando en un proyecto, la cantidad de datos es demasiado grande y el proceso de obtener los datos del servidor lleva demasiado tiempo. Para acortar este tiempo, necesitamos reducir la cantidad de solicitudes y el tiempo para una sola solicitud.
Para reducir la cantidad de solicitudes, podemos obtener los datos una vez tanto como sea posible en lugar de dividirlos en varias solicitudes. Si hay demasiadas solicitudes, se bloqueará el hilo.
Podemos realizar las optimizaciones adecuadas en combinación con negocios específicos y fusionar algunos de los datos devueltos para reducir el número de solicitudes.
Sin embargo, el tiempo requerido para una sola solicitud es demasiado largo y consume mucho tiempo. Cuando transmitimos una gran cantidad de datos, solo podemos comprimir los datos para que la solicitud única sea más rápida.
Hay otras soluciones, como la carga diferida, donde la página presenta al usuario una parte del contenido, en lugar de solicitar todo el contenido de una vez. Por otro ejemplo, el audio usa un archivo de transmisión en lugar de solicitar que todo el audio se reproduzca para el usuario, pero en forma de transmisión, reproducción y solicitud al mismo tiempo.
Evite volver a dibujar y refluir
Además, lo más importante es la optimización de la página. Primero revise el principio de funcionamiento del navegador.
Animación: ¿Cómo funciona un navegador?
Uno de los enlaces es el enlace de representación, que muestra el árbol de representación sintetizado a través de las posiciones y estilos de píxeles calculados en la página y, finalmente, se lo presenta al usuario.
Aunque la página que vemos en el navegador no se siente, pero este proceso lleva mucho tiempo, especialmente cuando cambiamos ligeramente la posición, el tamaño o el estilo de un elemento en la página, hará que toda la página se vuelva a renderizar.
Si hay mucho contenido para renderizar en la página, cada vez que el usuario cambia un lugar, causará todo el renderizado, el rendimiento lleva mucho tiempo y, finalmente, la experiencia del usuario no es buena y la página deja de responder en casos severos.
Se menciona en muchos artículos que hemos visto que debemos tratar de evitar la manipulación frecuente del DOM, para evitar el reflujo y el rediseño de la página.
Descubrimos qué mejoras ha hecho Vue. Dado que operar el DOM conduce a un rendimiento deficiente, no operaré el DOM, por lo que Vue abandonó la operación DOM tradicional y abrió el modo de vista influenciado por datos. (PD: En el análisis posterior del artículo del código fuente de Vue, compartiré principalmente esta parte de cómo se implementa ingeniosamente y luego llevaré a todos a escribir una versión simple de Vue por sí mismos)
Pero muy indefenso, algunas empresas no utilizan Vue, hay demasiadas empresas de este tipo y los líderes dijeron que simplemente no quieren utilizar Vue. Solo quiero usar HTML5 + CSS3 + jQuery tradicional, entonces, ¿qué debemos hacer para la optimización?
Personalmente hice algunos resúmenes de optimización del rendimiento basados en esto. Dado que Vue no está permitido, la escena específica decidida aún implica operar el DOM. Aunque no puedo renunciar al DOM tradicional, entonces trato de reducir el funcionamiento del DOM tanto como sea posible. Sí, pensando en esta dirección, podemos resumir lo siguiente Algunos puntos de contenido, en los que se centra el libro pequeño.
1 、
Operaciones de lectura y escritura separadas
Nuestros frecuentes cambios en la posición y el tamaño del estilo de la página provocarán que la página se rediseñe y se rediseñe. Los navegadores actuales han realizado una pequeña optimización para esto. Si la línea de código actual cambia el tamaño o la posición del elemento, no hará que la página se vuelva a representar de inmediato y Determine si la siguiente línea también cambia el tamaño y el estilo del elemento.
div.style.background = '#fff'
div.style.color = 'red'
Si es así, estos códigos consecutivos se contarán en una cola de procesamiento hasta que la siguiente línea de código no sea el código que cambia el estilo, y luego el procesamiento de la página se realiza de manera uniforme, lo que reduce en gran medida el reflujo y el rediseño de la página.
De acuerdo con el mecanismo de cola de procesamiento del navegador, cuando escribimos código, separamos las operaciones de atributos de lectura y escritura, como se muestra a continuación.
var curLeft = div.offsetLeft;
var curTop = div.offsetTop ;
div.style.left = curLeft + 1 + 'px'
div.style.top = curTop + 1 + 'px'
Si no separa las operaciones de lectura y escritura, sino que mezcla las operaciones de lectura y escritura para escribir, esto provocará un reflujo y un rediseño continuos.
2 、
Cambios de estilo centralizados
De la misma manera, cuando usamos JS para cambiar estilos en lotes, debemos cambiar los estilos colectivamente.
box.style.cssText = 'width:200px;height:200px'；
box.className = 'aa'
3 、
Información de diseño de caché
Normalmente pasamos el tamaño del diseño dinámico JS, lo que solemos hacer.
// 以下会引发两次回流
div.style.left = div.offsetLeft + 1 + 'px'
div.style.top= div.offsetTop + 1 + 'px'
Pero de acuerdo con lo que hemos resumido anteriormente, esto no es bueno porque provocará múltiples redibujos.
Si hacemos esto, primero almacenamos la información de diseño obtenida a través de variables y luego cambiamos el estilo de manera uniforme.
// 修改为：只会触发一次回流
var curLeft = div.offsetLeft;
var curTop = div.offsetTop ;
div.style.left = curLeft + 1 + 'px'
div.style.top = curTop + 1 + 'px'4 、
Modificación por lotes de elementos
Si cambiamos los elementos en lotes, podemos sacarlos y cambiarlos por separado, y luego volver a colocarlos en la página, de modo que no importa cuántas veces los cambie, solo se activará un reflujo.
// 文档碎片
let frg = document.createDocumentFragment();
for(let i = 0;i < 5;i++){
let newLi = document.createElement('li');
newLi.innerHTML = i;
frg.appendChild(newLi);
}Además, también podemos utilizar el empalme de ventanas de caracteres.
// 字符串拼接
for（let i= 0；i< 5;i++）{
str += `<li>${i}</li>`
}
box.innerHTML = str
5 、
Optimización de animaciones
A veces queremos utilizar la animación, que cambia con frecuencia el estado de los elementos, provocando un reflujo y un rediseño constantes.
Por lo tanto, para mejorar el rendimiento, aplicamos efectos de animación a atributos de posición absoluta o fija (fuera del flujo de documentos).
Aunque estará en un plano nuevo, también provocará reflujo, pero no afectará a otros elementos, por lo que se ve mejor.
6 、
Habilite la aceleración de hardware CSS (aceleración de GPU)
CSS3 puede usar transform para cambiar el estilo y usar otros elementos localmente, porque transform activa la aceleración del hardware y evita [reflujo] y [redibujar].
box.style.transform = 'translateX(200px)'
Otros atributos de la aceleración de hardware: transformar \ opacidad \ filtros. Por lo tanto, puede usar estos atributos tanto como sea posible para usar estos atributos para cambiar el elemento.
7 、
Sacrificar velocidad suave por velocidad
Cada vez que la animación se mueve un píxel, el uso de la CPU es del 100% y la animación se ve un poco entrecortada porque el navegador tiene problemas con el reflujo.
Si mueve 3 píxeles a la vez, la suavidad puede parecer reducida, pero no hará que la CPU se mueva en máquinas más lentas.
resumen
Lo anterior es un resumen de varias soluciones de optimización para los problemas de rendimiento de algunas páginas web tradicionales. Pero estos puntos por sí solos no son suficientes.
Como se mencionó al principio, la optimización del rendimiento no es solo una cuestión de ingenieros de front-end o back-end, sino también de la optimización del rendimiento de todo el enlace.
Ya sea que se trate de optimización del rendimiento u otros aspectos como algoritmos y redes, debería formar una especie de sistema de conocimiento ideológico propio. Al encontrarnos constantemente con problemas, resolverlos y luego mejorar constantemente este sistema, esta es una pequeña meta que finalmente queremos perseguir.