javascript - none - ocultar elemento html css
Diferencias de rendimiento entre visibilidad: oculta y visualización: ninguna (8)
Quiero simplificar las cosas en mi aplicación web jQuery Backbone.js. Una de esas simplificaciones es el comportamiento de mis widgets de menú y diálogo.
Anteriormente creé las cajas div de mis menús al inicio y las oculté usando display: none; opacity:0; display: none; opacity:0; . Cuando necesitaba un menú, cambié su estilo para display:block luego usé la utilidad de posición jQuery ui para colocar la caja div (ya que los elementos con display:none se puede colocar) y cuando se hizo, finalmente cambió su estilo a opacity:1 .
Ahora solo quiero ocultarlos con visibility:hidden , y cuando necesito uno, uso la utilidad de posición y luego cambio el estilo a visibility:visible . Cuando comience a usar este nuevo enfoque, tendré alrededor de 10 cuadros de div a lo largo de la sesión de la aplicación web que están ocultos pero ocupan espacio, en contraste con los cuadros de div anteriores ocultos con display:none .
¿Cuáles son las implicaciones de mi nuevo enfoque? ¿Afecta el rendimiento del navegador en cualquier aspecto?
Bueno, la principal diferencia de rendimiento entre display: block y visibility: hidden es que si tiene una lista de, por ejemplo, 100000 elementos, la visibility: hidden no lo salvará del bloqueo de DOM porque no elimina elementos de DOM. visibility: hidden actos visibility: hidden como opacity: 0 + pointer-events: none . display: none actúa como Element.remove() .
Ejemplo en vivo: https://jsfiddle.net/u2dou58r/10/
Bueno, visibilidad: ninguno todavía usa el espacio del div. Por lo tanto, tal vez podría omitir la parte de posicionamiento porque su lugar ya está asignado (y de ese modo obtendrá un mejor rendimiento).
Pero, de alguna manera, supongo que necesita su pantalla: ninguno se aproxima para asignar espacio correctamente cuando se activa el evento "show".
Creo que esto podría estar relacionado de alguna manera con esta pregunta: Propiedades de CSS: visualización frente a visibilidad
Solo citaré la parte interesante:
el elemento NUNCA se elimina de la jerarquía DOM. Todos los ''estilos'' de visualización de nivel de bloque están completamente ''ocultos'' cuando se usa display: ninguno, mientras que con visibilidad: oculto; el elemento en sí está oculto pero aún ocupa un espacio visual en el DOM.
Por lo tanto, no debería haber una diferencia real con respecto al rendimiento del navegador, porque ambas versiones aún están en la jerarquía DOM. Estas propiedades solo afectan la forma en que se muestra un elemento con respecto al DOM.
Desde la experiencia personal que acabo de probar en una página estática simple con un formulario ubicado debajo de un botón "oculto", la visibility: hidden realiza sin problemas mientras que la display: none hace que los botones pulsables salten ligeramente al hacer clic, como si intentaran mostrar el botón oculto por un milisegundo
No tengo conocimiento de ninguna diferencia de rendimiento entre la display:none y la visibility:hidden , incluso si la hay, por tan solo 10 elementos será completamente insignificante. Su principal preocupación debería ser, como usted dice, si desea que los elementos permanezcan dentro del flujo del documento, en cuyo caso la visibility es una mejor opción, ya que mantiene el modelo de caja del elemento.
Si está alternando entre estados visibles e invisibles a través de javascript, entonces la visibilidad: oculta debería ser la que tenga mejor desempeño. Al ver que siempre ocupa la misma cantidad de espacio tanto en el estado visible como en el oculto, no provocará un reflujo de los elementos debajo de él cada vez que lo haga desaparecer. Para mostrar: ninguno lo está eliminando del flujo del documento y luego, cuando lo configura para mostrar: bloque, lo está volviendo a enviar y está presionando todo lo que está debajo de ese elemento, esencialmente eliminando todo eso nuevamente.
Pero si está haciendo algo como alternar los estados visibles al presionar los botones, entonces realmente debería usar lo que se adapte a sus necesidades en lugar de lo que funciona mejor, ya que las diferencias de rendimiento son insignificantes en tales casos. Cuando está animando con el dom a aproximadamente 20 veces por segundo, ENTONCES, puede preocuparse por el rendimiento de la visibilidad: oculto frente a pantalla: ninguno.
display:none; los elementos no están todos en el árbol de procesamiento , por lo que se desempeñarán mejor en su valor nominal.
Sin embargo, dudo que tengas problemas de rendimiento visibles reales. Si necesita opacity: 0 o visibility: hidden debido a su funcionalidad , entonces simplemente úselos. Si no necesita la funcionalidad, use display: none;
visibility: hidden no provoca un flujo en el documento, mientras que la display: none hace.
display: none hace que el motor HTML ignore completamente el elemento y sus elementos secundarios. El motor no ignorará los elementos marcados con visibility: hidden , hará todos los cálculos al elemento y sus elementos secundarios, con la excepción de que el elemento no se representará en la ventana gráfica.
Si se necesitan los valores para las propiedades de posición y dimensiones, entonces se debe usar visibility: hidden y debe manejar el espacio en blanco en la ventana gráfica, generalmente envolviendo ese elemento dentro de otro con 0 ancho y alto y ''desbordamiento: oculto''.
display:none eliminará el elemento del flujo normal del documento y establecerá los valores de posición / altura / anchura en 0 en el elemento y sus elementos secundarios. Cuando la propiedad de display elementos se cambia a un valor diferente a none , activa un nuevo flujo de documentos, lo que puede ser un problema para documentos grandes, y en ocasiones documentos no tan grandes que se procesan en hardware con capacidades limitadas.
display: none es la solución lógica y natural que se debe usar cuando se ocultan elementos en la ventana gráfica, visibiliy: hidden debe usar como una alternativa, donde / cuando sea necesario.
EDITAR: Como lo señaló @Juan, display: none es la opción a seguir cuando lo que necesita es agregar muchos elementos al árbol DOM. visibility: hidden desencadenará un flujo para cada elemento agregado al árbol, mientras que la display: none hará.