Prefacio:
Nunca optimice prematuramente
Proyectos específicos, análisis específicos, no tiene sentido mirar la optimización fuera de contexto
usar clave
Para las listas generadas por bucles, a cada elemento de la lista se le debe dar una clave estable y única , lo cual es beneficioso para eliminar, agregar y cambiar elementos lo menos posible cuando la lista cambia, porque el algoritmo diff usa el valor de la clave para comparar.
El índice es único como valor clave, pero no es lo suficientemente estable. Por ejemplo, insertar un elemento hará que todos los elementos posteriores se vuelvan a representar, y lo que queremos es representar solo el elemento recién agregado.
Por ejemplo, si hay una lista, necesitamos insertar un elemento en el medio. ¿Qué pasará si no se usa la clave o se usa el índice como clave? primero mira una foto
Li1 y li2 como se muestran en la imagen no se volverán a renderizar, esto no es controvertido. Y li3, li4 y li5 se volverán a representar
porque cuando la clave o el índice de la lista no se usa como clave, la relación posicional correspondiente a cada elemento es el índice. El resultado en la figura anterior conduce directamente a el elemento que insertamos en todos los elementos detrás, la relación posicional correspondiente ha cambiado, por lo que todos se actualizarán durante el proceso de parche y luego se volverán a renderizar.
Esto no es lo que queremos. Lo que queremos es renderizar el elemento agregado sin ningún cambio en los otros cuatro elementos, así que no vuelvas a renderizar.
En el caso de usar una clave única, la relación de posición correspondiente de cada elemento es clave, echemos un vistazo al caso de utilizar un valor clave único
De esta manera, li3 y li4 en la figura no se volverán a representar porque el contenido de los elementos no ha cambiado y la relación posicional correspondiente no ha cambiado.
Es por eso que v-for debe escribir la clave y no se recomienda utilizar el índice de la matriz como clave en el desarrollo.
Utilice Object.freeze() para mostrar datos
Los objetos congelados no responderán
Cuando el objeto observado es un objeto anidado, se requiere recursividad
Si hay muchos objetos y la estructura anidada es profunda, el tiempo de recorrido será mayor
pensar:
¿Todas las propiedades deben ser responsivas?
En los datos originales, algunos no necesitan responder, llamados datos de visualización , como listas de productos, imágenes de precios de productos, etc., no se pueden manipular.
Responsivo de datos: después de los cambios de datos, las funciones que dependen de los datos se volverán a ejecutar automáticamente (importante)
-
Función monitoreada
renderizar, devolución de llamada calculada, mirar, verEfecto
-
Los datos responsivos se utilizan durante la ejecución de la función (los datos responsivos deben ser un objeto)
-
Los cambios de datos reactivos harán que la función se vuelva a ejecutar
Vue juzgará si el objeto está congelado Object.isFrozen (), si es verdadero, no lo atravesará
let obj = {
a: 1,
b: 3
}
/* 冻结对象 */
Object.freeze(obj);
obj.c = 2;
console.log(obj); // {a: 1, b: 3}
/* 判断对象是否被冻结 */
console.log(Object.isFrozen(obj)); // true
Determinar si el objeto está congelado Object.isFrozen()
Object.isFrozen(obj);Antes de congelar:
Después de congelar:
en comparación con antes de congelar, cada atributo tiene menos métodos de obtención y configuración, y la velocidad de renderizado es más rápida.
Utilice componentes funcionales (sin estado, sin instancia)
A veces, un componente nuestro solo necesita aceptar algunos datos de accesorios sin cambiar nada. En este momento, podemos usar componentes funcionales. Los componentes funcionales pueden reducir una cierta cantidad de tiempo de ejecución del script y uso de memoria al renderizar.
Funciones de renderizado y JSX: Vue.js
Podemos marcar un componente functionalsimplemente como una función que requiere algunos accesorios , lo que significa que no tiene estado (sin datos reactivos ) ni instancia (sin this contexto). Un componente funcional se ve así:
Vue.component('my-component', {
functional: true,
// Props 是可选的
props: {
// ...
},
// 为了弥补缺少的实例
// 提供第二个参数作为上下文
render: function (createElement, context) {
// ...
}
}) 
Componentes comunes, la memoria js aumentó en 30 M
Componentes funcionales, memoria js aumentada en 20M
Vue no crea ninguna instancia para componentes funcionales
Vea el nodo virtual VNode, puede ver que el componente normal no puede ver el componente funcional
Usando propiedades calculadas
Si ciertos datos en la plantilla se usarán varias veces y los datos se obtienen a través de la computadora, se pueden almacenar en caché usando la propiedad calculada (los defectos no pueden pasar parámetros)
Elementos de formulario que no están enlazados en vivo ( v-model.lazy )
La idea de diseño de vue es centrarse en los datos en lugar de la interfaz. La facilidad de mantenimiento y legibilidad del código también son muy importantes. El hilo de ejecución de js y el hilo de representación del navegador son mutuamente excluyentes, por lo que cuando se ejecuta la animación, la animación del hilo jS se congelará
Cuando se utiliza v-model para vincular un elemento de formulario, cuando el usuario cambia el estado del elemento de formulario, los datos también se cambiarán en consecuencia, lo que hará que Vue se vuelva a renderizar, lo que generará una sobrecarga de rendimiento.
Especialmente cuando se cambia el elemento del formulario, la página tiene una animación en ejecución, porque el hilo js y el hilo del navegador son mutuamente excluyentes, lo que eventualmente hará que la animación se congele.
Puede usar v-model.lazy (cuando se pierde el foco) o no usar v-model, pero esto puede causar que el valor de los datos y los elementos del formulario sean diferentes dentro de un cierto período de tiempo.
Cuando se utiliza para vincular un elemento de formulario, cuando el usuario cambia el estado del elemento de formulario, los datos también se cambiarán en consecuencia, lo que hará que Vue se vuelva a renderizar, lo que generará cierta sobrecarga de rendimiento.
Especialmente cuando el usuario cambia el elemento del formulario, la página tiene algunas animaciones en progreso, porque el hilo de ejecución de JS y el hilo de representación del navegador son mutuamente excluyentes, lo que eventualmente hará que la animación se congele.
Podemos resolver este problema usando v-model.lazy ( cuando se pierde el foco ) o no usando v-model , pero tenga en cuenta que esto puede causar que los datos y los elementos del formulario sean inconsistentes dentro de un cierto período de tiempo .
v-model escucha los eventos @input
v-model.lazy escucha los eventos @change
Mantener estables las referencias a objetos (si el componente debe volver a renderizarse)
En la mayoría de los casos, vue activa la reproducción cuando los datos de los que depende cambian
Si los datos no han cambiado, incluso si los datos se reasignan, vue no hará nada
function hasChanged (x, y) {
if (x === y) {
return x === 0 && 1 / x !== 1 / y;
} else {
return x === x || y === y;
}
}
NaN === NaN falso
NaN !== NaN verdadero
+0 === -0 verdadero
1/+0 Infinito
1/-0 -Infinito
Los componentes no se volverán a representar si es necesario, siempre y cuando se garantice que los datos dependientes del componente no cambiarán
Para tipos de datos primitivos, mantenga sus valores sin cambios.
Para los tipos de objetos, mantenga sus referencias sin cambios.
Por otro lado, dado que se puede evitar la repetición de subcomponentes manteniendo estables las referencias de propiedades, entonces debemos subdividir los componentes para evitar la representación redundante tanto como sea posible.
Por ejemplo, para hacer comentarios de usuarios, después de enviar el último comentario, actualice la lista de comentarios, existen dos métodos
1. Después de agregar, obtenga todo nuevamente del servidor (desventaja: la repetición de renderizado se activa con frecuencia)
2. Después de agregar, agregue el objeto recién agregado directamente al frente de los datos existentes (desventaja: los datos no son en tiempo real)
Sigue siendo la misma idea, solo queremos renderizar el objeto recién agregado, y los demás no renderizan
Al agregar una lista de comentarios, después de agregar un dato, generalmente llamamos a la interfaz para obtener los datos nuevamente. Después de obtener los datos, obtenemos el objeto json. Sin embargo, este objeto son dos datos diferentes del original, y luego se volverá a renderizar, pero muchos de los datos son los mismos, no es necesario volver a renderizar. Por lo tanto, después de agregar nuevos datos, podemos agregar estos nuevos datos directamente a los datos originales, sin llamar a la excusa para obtener todos los datos. El problema es que si alguien más agrega datos durante el período, entonces la página mostrada puede no ser en tiempo real (no se pueden mostrar nuevas incorporaciones de otros), pero no estipulamos que los datos deban mostrarse en tiempo real, porque siempre que se actualicen, estará bien.
También se puede ver a partir de esto que los beneficios de la subdivisión de componentes pueden evitar la representación redundante.
Utilice v-show en lugar de v-if
Para elementos que cambian con frecuencia de estado de visualización , el uso de v-show puede garantizar la estabilidad del árbol DOM virtual y evitar la adición y eliminación frecuentes de elementos, especialmente para aquellos nodos que contienen una gran cantidad de elementos DOM, lo cual es extremadamente importante.
Utilice carga diferida (aplazar)
Existen varias implementaciones, como cargar componentes en lotes y cargar datos en lotes.
El tiempo de pantalla blanca de la página de inicio se ve afectado principalmente por dos factores:
-
El tamaño del paquete es demasiado grande.
El enorme paquete necesita consumir mucho tiempo de transmisión, lo que da como resultado solo una página
<div>sin contenido visualizable antes de que se complete la transmisión JS. -
Demasiado contenido para renderizar inmediatamente
Una vez completada la transmisión de JS, el navegador comienza a ejecutar JS para construir la página.
Pero es posible que haya demasiados componentes para renderizar al principio, no solo el tiempo de ejecución de JS es muy largo, sino que también el navegador debe renderizar demasiados elementos una vez completada la ejecución, lo que da como resultado una pantalla en blanco de la página .
Un método factible es retrasar la carga de componentes y dejar que los componentes se representen uno por uno en el orden especificado.
La esencia es utilizar el evento requestAnimationFrame para representar contenido en lotes.
reaccionar fibra
Usar mantener vivo
En circunstancias normales, se destruirá cuando se cambie la página. Si no desea que se destruya, debe envolver el componente con keep-alive.
Por ejemplo, al cambiar entre la página de lista y la página de detalles, puede usar el componente de caché para evitar solicitudes repetidas de los mismos datos. keep-alive
Se utiliza para almacenar en caché las instancias de componentes internos, que tienen atributos de inclusión y exclusión, y max establece el número máximo de cachés. Después de excederlo, los más antiguos no utilizados se eliminarán automáticamente.
Afectados por keep-alive, sus componentes internos tienen dos ciclos de vida, activado y desactivado, los cuales se activan cuando el componente se activa y desactiva respectivamente, el primero que se activa es después del montaje.
Generalmente se utiliza en escenarios que requieren operaciones frecuentes en varias páginas (barra de navegación)
<keep-alive>
<router-view />
</keep-alive>
Optimización de listas largas
Por ejemplo, la cantidad de datos en una determinada página es de 10,000 datos, cómo optimizar el deslizamiento sin congelarse bajo la premisa de cargar datos en lotes.
Porque cada vez que se modifica el DOM, el navegador a menudo necesita volver a calcular el diseño del elemento y volver a renderizarlo. Este es el llamado reflujo y repintado. Especialmente en el caso de páginas con una gran cantidad de elementos y diseños complejos, el rendimiento puede verse afectado.
Un escenario común es la representación en listas de grandes cantidades de datos. Por lo general, aparece como una lista o tabla desordenada que se puede desplazar infinitamente. Cuando hay muchos datos, la página tendrá atascos de desplazamiento obvios.
Solución 1:
realice el procesamiento de paginación. La primera página de datos se muestra de forma predeterminada en la página de inicio y se carga el desplazamiento. Esta también es una solución. Si la lista no se puede paginar, cómo tratarla.
Escenario 2:
Cuando hay una gran cantidad de listas para mostrar, no es necesario renderizar todas las listas a la vez, solo es necesario renderizar el área visible y una parte de la lista debajo del área visible, y establecer el posicionamiento absoluto para estas listas renderizadas. y luego calcule la posición de desplazamiento. Para seguir actualizando la lista del área de inicio, no es necesario representar todas las listas de datos.
El principio de realización de la lista virtual: solo se representan los nodos dom en el área visible, el resto de los datos invisibles se acumulan y solo se representan los nodos dom en el área visible para mejorar el rendimiento y la fluidez de la representación. es que admite la representación de datos masivos; por supuesto, habrá desventajas: el efecto de desplazamiento es relativamente pobre (la elección entre datos masivos y efecto de desplazamiento depende de sus propias necesidades. Utilice el complemento vue-virtual-
scroller
cnpm install -D vue-virtual-scroller
main.js 引入这个插件：
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
import Vue from "vue";
import VueVirtualScroller from "vue-virtual-scroller";
Vue.use(VueVirtualScroller);
Solución 3:
Rollo de aceleración para reducir la presión del servidor.
Solución 4:
Vue secuestrará los datos a través de Object.defineProperty para realizar el cambio de los datos de respuesta de la vista. Sin embargo, a veces nuestros componentes son pura visualización de datos sin ningún cambio. No necesitamos que Vue secuestra nuestros datos, en el caso de Se muestra una gran cantidad de datos, lo que puede reducir significativamente el tiempo de inicialización de los componentes. Entonces, ¿cómo evitar que Vue se apropie de nuestros datos? Un objeto se puede congelar mediante el método Object.freeze. Una vez que el objeto se congela, ya no se puede modificar.
export default{
data: =>({ users: {} }),
async created {
const users = await axios.get("/api/users");
this.users = Object.freeze(users);
}
};
Opción 5:
Agregue atributos CSS para que la barra de desplazamiento tiemble al desplazarse. Después de agregar los atributos, la barra de desplazamiento se vuelve más larga y el arrastre no es suave, pero se puede cargar a pedido.
content-visibility: auto: si el elemento está fuera de la pantalla y no es relevante para el usuario, sus elementos descendientes no se representarán.- En algunos elementos que deben mostrarse y ocultarse con frecuencia, utilice content-visibility: oculto, el agente de usuario no necesita volver a renderizarlo ni sus elementos secundarios, lo que puede mejorar efectivamente el rendimiento de renderizado durante el cambio;
- visibilidad de contenido: automático es más similar a una lista virtual, su uso puede mejorar en gran medida el rendimiento de representación de listas largas y páginas de texto largas;
- Utilice razonablemente el tamaño intrínseco del contenido para estimar la altura y el ancho del elemento de visibilidad del contenido: automático, que puede evitar eficazmente la vibración de la barra de desplazamiento durante el desplazamiento;
- content-visibility: auto no puede reemplazar directamente a LazyLoad. Los elementos con content-visibility: auto no se representan fuera del área visible, pero los recursos estáticos que contiene aún estarán completamente cargados cuando se inicialice la página;
- Incluso si hay elementos no renderizados con visibilidad de contenido: configuración automática, no afectará la función de búsqueda global.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
content-visibility: auto;
line-height: 40px;
}
.container {
overflow: auto;
}
</style>
</head>
<body>
<div class="container"></div>
<script>
let container = document.querySelector('.container');
let innerHTML = '';
for(let i = 0; i < 1000; i++) {
innerHTML += `<p>第${i}行，我是长列表</p>`
}
container.innerHTML = innerHTML;
</script>
</body>
</html>Optimización del tamaño del paquete (paquete web)
Dividido en optimización de la velocidad del embalaje y optimización del volumen del embalaje.