angularjs - ejemplos - ¿Cuándo favorecer ng-if vs. ng-show/ng-hide?

ng-show ng-hide angularjs examples (7)

Entiendo que ng-show y ng-hide afectan la clase establecida en un elemento y que ng-if controla si un elemento se representa como parte del DOM.

¿Existen pautas para elegir ng-if over ng-show / ng-hide o viceversa?

Consulte here un CodePen que demuestra la diferencia en el funcionamiento de ng-if / ng-show, en lo que respecta a DOM.

@markovuksanovic ha respondido bien la pregunta. Pero lo entendí desde otra perspectiva: siempre usaría ng-if y obtendría esos elementos de DOM, a menos que:

Por alguna razón, necesita que los enlaces de datos y los $watch -es de sus elementos permanezcan activos mientras estén invisibles. Los formularios pueden ser un buen caso para esto, si desea poder verificar la validez de las entradas que actualmente no están visibles, para determinar si todo el formulario es válido.
Estás usando una lógica de estado realmente elaborada con controladores de eventos condicionales, como se mencionó anteriormente. Dicho esto , si se encuentra adjuntando y desconectando manualmente los manejadores, de modo que está perdiendo un estado importante cuando usa ng-if, pregúntese si ese estado estaría mejor representado en un modelo de datos, y los manejadores se aplicarán condicionalmente por directivas siempre que el elemento está renderizado. Dicho de otra manera, la presencia / ausencia de manejadores es una forma de datos estatales. Saque esos datos del DOM y conviértalos en un modelo. La presencia / ausencia de los manejadores debe ser determinada por los datos y, por lo tanto, fácil de recrear.

Angular está escrito muy bien. Es rápido, considerando lo que hace. Pero lo que hace es un montón de magia que hace que las cosas difíciles (como el enlace de datos bidireccional) parezcan trivialmente fáciles. Hacer que todas esas cosas parezcan fáciles implica una sobrecarga de rendimiento. Es posible que se sorprenda al darse cuenta de la cantidad de cientos o miles de veces que se evalúa una función de establecimiento durante el ciclo de $digest en un trozo de DOM que nadie está mirando. Y luego te das cuenta de que tienes docenas o cientos de elementos invisibles que hacen lo mismo ...

Los equipos de escritorio pueden ser lo suficientemente potentes para hacer que la mayoría de los problemas de velocidad de ejecución de JS sean discutibles. Pero si se está desarrollando para dispositivos móviles, usar ng-if siempre que sea humanamente posible debería ser una obviedad. La velocidad de JS sigue siendo importante en los procesadores móviles. El uso de ng-if es una forma muy fácil de obtener una optimización potencialmente significativa a un costo muy, muy bajo.

Depende de su caso de uso pero para resumir la diferencia:

ng-if eliminará elementos de DOM. Esto significa que todos sus manejadores o cualquier otra cosa relacionada con esos elementos se perderán. Por ejemplo, si vincula un controlador de clic a uno de los elementos secundarios, cuando ng-if evalúa como falso, ese elemento se eliminará de DOM y su controlador de clic ya no funcionará, incluso después de que ng-if luego se evalúe como verdadero y muestra el elemento. Tendrá que volver a colocar el controlador.
ng-show/ng-hide no elimina los elementos de DOM. Utiliza estilos CSS para ocultar / mostrar elementos (nota: es posible que necesites agregar tus propias clases). De esta manera no se perderán sus manipuladores que estaban unidos a los niños.
ng-if crea un ámbito secundario mientras que ng-show/ng-hide no lo hace

Los elementos que no están en el DOM tienen menos impacto en el rendimiento y su aplicación web puede parecer más rápida cuando se usa ng-if comparación con ng-show/ng-hide . En mi experiencia, la diferencia es despreciable. Las animaciones son posibles cuando se usan ng-show/ng-hide y ng-if , con ejemplos para ambos en la documentación de Angular.

En última instancia, la pregunta que debe responder es si puede eliminar un elemento de DOM o no.

La respuesta no es simple:

Depende de las máquinas de destino (dispositivos móviles y equipos de escritorio), depende de la naturaleza de sus datos, el navegador, el sistema operativo, el hardware en el que se ejecute ... tendrá que realizar pruebas comparativas si realmente desea saberlo.

Es principalmente un problema de memoria frente a cálculo ... como con la mayoría de los problemas de rendimiento, la diferencia puede ser significativa con elementos como (n) listas similares, especialmente cuando están anidadas (nxn, o peor) y también qué tipo de cálculos ejecuta dentro de estos elementos :

ng-show : si esos elementos opcionales suelen estar presentes (densos), como por ejemplo el 90% del tiempo, puede ser más rápido tenerlos listos y solo mostrarlos / ocultarlos, especialmente si su contenido es barato (solo texto sin formato, nada). para calcular o cargar). Esto consume memoria a medida que llena el DOM con elementos ocultos, pero solo mostrar / ocultar algo que ya existe es probable que sea una operación barata para el navegador.
ng-if : si, por el contrario, es probable que no se muestren elementos (dispersos), simplemente compílelos y destrúyalos en tiempo real, especialmente si su contenido es costoso de obtener (cálculos / clasificaciones / imágenes filtradas, imágenes generadas). Esto es ideal para elementos raros o "bajo demanda", ahorra memoria en términos de no llenar el DOM, pero puede costar muchos cálculos (creación / destrucción de elementos) y ancho de banda (obtención de contenido remoto). También depende de cuánto calcule en la vista (filtrado / clasificación) en comparación con lo que ya tiene en el modelo (datos pre-ordenados / pre-filtrados).

Por mi experiencia:

1) Si su página tiene un interruptor que usa ng-if / ng-show para mostrar / ocultar algo, ng-if causa más retraso en el navegador (más lento). Por ejemplo: si tiene un botón usado para alternar entre dos vistas, ng-show parece ser más rápido.

2) ng-if creará / destruirá el alcance cuando se evalúe como verdadero / falso. Si tiene un controlador conectado al ng-if, ese código del controlador se ejecutará cada vez que ng-if se evalúe como verdadero. Si está utilizando ng-show, el código del controlador solo se ejecuta una vez. Entonces, si tiene un botón que alterna entre varias vistas, usar ng-if y ng-show marcaría una gran diferencia en la forma en que escribe el código de su controlador.

Si utiliza ng-show or ng-hide el contenido (por ejemplo, miniaturas del servidor) se cargará independientemente del valor de la expresión, pero se mostrará en función del valor de la expresión.

Si usa ng-if el contenido se cargará solo si la expresión de ng-if se evalúa como verdadera.

Usar ng-if es una buena idea en una situación en la que va a cargar datos o imágenes desde el servidor y mostrarlos solo en función de la interacción de los usuarios. De esta manera, la carga de su página no será bloqueada por tareas innecesarias e innecesarias.

Una nota importante:

ngIf (a diferencia de ngShow) generalmente crea ámbitos secundarios que pueden producir resultados inesperados.

Tuve un problema relacionado con esto y pasé MUCHO tiempo para averiguar qué estaba pasando.

(Mi directiva estaba escribiendo sus valores de modelo en el ámbito incorrecto).

Por lo tanto, para guardar tu cabello solo usa ngShow a menos que corras demasiado lento.

La diferencia de rendimiento es apenas perceptible de todos modos y aún no estoy seguro de quién es el favor, sin una prueba ...

ng-if en ng-include y en ng-controller tendrá un gran impacto en ng-include, no cargará el parcial requerido y no procesará a menos que el indicador sea verdadero en ng-controller, no cargará el controlador a menos que el indicador sea cierto, pero el problema es cuando un indicador se vuelve falso en ng-si se eliminará de DOM cuando el indicador vuelva a ser verdadero, volverá a cargar el DOM en este caso es mejor ng-show, por una vez, mostrar ng-if es mejor