manipulaciones de jQuery DOM: ¿comparación de rendimiento?

Question

Estoy aprendiendo la manipulación DOM con jQuery y quiero entender las mejores prácticas de rendimiento del navegador.

Digamos que tengo dos elementos DOM (div, p, ol, etc.) y quiero que un usuario vea solo el primer elemento y solo vea el segundo elemento.

pude:

1. Uso replace()
2. remove() el primer elemento y añadir() el segundo elemento
3. ocultar() el primer elemento y show() el segundo elemento

¿Cuál es las diferencias de rendimiento entre:

• 1 vs 2
• 2 vs 3
• 1 vs 3

¿Existen consideraciones adicionales de rendimiento si los elementos son de diferentes tipos? O si los elementos son botones o campos de formulario?

Answer 1

Eliminar y agregar elementos al DOM es costoso en términos de recursos debido a browser reflow, donde el navegador debe volver a procesar una parte o la totalidad de la página. Desea evitar reflows siempre que pueda; son costosos

Reemplazar es esencialmente una eliminación y luego una adición, por lo que se aplica lo anterior.

Mostrar y ocultar es lo mejor, porque solo está agregando estilos a los elementos.

El tipo de elementos con los que está aplicando estos métodos tampoco debería llevar a un cambio en los anteriores. En conclusión, use .show() y .hide() para obtener el mejor rendimiento.

Answer 2

Básicamente si quiere ocultar algo y luego mostrarlo más tarde, siempre es mejor ocultar() y mostrar(). Esto no cambiará nada sobre el dom, simplemente cambia la forma en que se muestra.