Cuando desarrollamos aplicaciones de Internet enriquecidas (RIA), a menudo escribimos algunos scripts javascript para modificar o agregar elementos de la página. Estas tareas finalmente las completa DOM, o modelo de objetos de documento, y nuestro método de implementación afectará la velocidad de respuesta de la aplicación.
Las operaciones DOM harán que el navegador vuelva a analizar (refluir), que es un proceso de cálculo del navegador que determina cómo se muestran los elementos de la página. Modificar directamente el DOM, modificar el estilo CSS de un elemento o modificar el tamaño de la ventana del navegador activará la reparación. La lectura de las propiedades de diseño de un elemento, como offsetHeithe o offsetWidth, también activará la reparación. La reparación requiere tiempo de cálculo, por lo que cuanto menos se active, más rápida será la aplicación.
Las operaciones DOM generalmente modifican elementos de página existentes o crean nuevos elementos de página. Las siguientes cuatro soluciones de optimización cubren dos métodos para modificar y crear nodos DOM, lo que le ayuda a reducir la cantidad de veces que activa el nuevo análisis del navegador.
Solución 1: modifique el DOM cambiando los nombres de las clases CSS
Esta solución nos permite modificar múltiples atributos de estilo de un elemento y sus elementos secundarios a la vez y activar solo un análisis.
necesidad:
( Nota de emu : El autor del artículo original obviamente tuvo un cortocircuito en su cerebro cuando escribió esto y puso los problemas a resolver en el modo de manipulación DOM fuera del flujo posterior aquí. Sin embargo, es Es fácil de entender para el autor a partir del código de demostración. El problema que realmente quiero describir, por lo que emu no reproducirá el texto original.
Ahora necesitamos escribir una función para modificar varias reglas de estilo de un hipervínculo. Es muy sencillo de implementar, basta con cambiar los atributos correspondientes a estas reglas uno por uno. Pero el problema es que cada vez que se modifica un atributo de estilo, se volverá a analizar la página.
función seleccionarAncla(elemento) {
element.style.fontWeight = 'negrita';
element.style.textDecoration = 'ninguno';
elemento.estilo.color = '#000';
}
Solución:
Para resolver este problema, primero podemos crear un nombre de estilo y colocar todas las reglas de estilo a modificar en este nombre de clase. Luego agregamos este nuevo nombre de clase al hipervínculo, de modo que podamos agregar varias reglas de estilo y solo se realiza un análisis. motivado. Otra ventaja de este modelo es que también logra la separación de rendimiento y lógica.
.ancla seleccionada {
peso de fuente: negrita;
decoración de texto: ninguna;
color: #000;
}
función seleccionarAncla(elemento) {
element.className = 'ancla seleccionada';
}