Si tengo muchos DOM en la página y los configuro a todos para mostrar: ninguno, el navegador aún reacciona rápidamente (el desplazamiento es rápido, la página se siente ágil).Muchos de DOM. Oculto vs pantalla ninguno
Sin embargo, si la visibilidad: oculta los elementos, el navegador es tan lento como si hubieran sido dibujados en la pantalla.
¿Alguien puede explicar, en detalle, por qué este es el caso?
Bueno, en cierto modo, se dibujan (pero no realmente): El navegador guarda espacio para ellos, por lo que debe tener en cuenta los elementos cuando se pone a cabo las visibles.
El cuadro es invisible (totalmente transparente, no se dibuja nada), pero aún afecta diseño. Los descendientes del elemento serán visibles si tienen visibilidad: visibles (esto no funciona en IE hasta la versión 7).
Si especifica display: none lugar, el navegador sólo como para preocuparse por y el diseño de las visibles. No tiene que tomar en cuenta a los demás.
Según su relación visible/invisible y la cantidad de elementos, esto puede hacer la diferencia.
Mejor explicación llana en inglés aún. – jball
Con visibility:hidden, todos se dibujan en la pantalla, pero no son visibles para el usuario. En su lugar, con display:none no se dibujan
Lo aclararía, para 'visibility: hidden' se representan en el diseño pero ** no ** dibujados en la pantalla. – jball
"el navegador es tan lento como si hubieran sido dibujados en la pantalla".
Creo que esto es lento porque la etiqueta todavía se representa, pero no se ve en la pantalla.
Salida this
Con visibility: hidden, es necesario calcular sus tamaños para que se pueda reservar la cantidad de espacio adecuada para ellos. Ellos, efectivamente, todavía están dibujados.
Porque display: none realmente elimina los elementos del DOM. visibility: hidden simplemente los hace invisibles, pero todavía están allí.
Se puede notar la diferencia porque los campos de formulario de entrada que tienen display: none serán simplemente no se incluirán en el formulario cuando lo presente; Los campos de entrada que simplemente tienen visibility: hidden establecido todavía estarán allí. Bueno, al menos, esa es mi experiencia: otros navegadores pueden comportarse de manera diferente.
Los estilos no deberían estar afectando al DOM. El comportamiento descrito aquí contradice la sección "17.13.2 Controles exitosos" en la especificación HTML 4.01. – CurtainDog
pantalla: ninguna; no elimina o de todos modos afecta la representación DOM de un elemento. – csuwldcat
He verificado que para algunos navegadores, al configurar 'display: none' dinámicamente * does * remove los elementos del DOM, independientemente de lo que diga la especificación. Eso es aparentemente una optimización del rendimiento. Lo he visto al menos en Safari 6.2.2. Votante padre. – Yitz
Utilizando display:none, el navegador no inicializa estos elementos ni procesa el contenido. Este no es el caso cuando se usa visibility:hidden, que inicializa estos elementos pero simplemente los oculta.
imaginar una pintura.
Tiene un fondo blanco y comienza a dibujar una manzana con muchos detalles durante una hora y luego la cubre por completo con otra capa de pintura blanca. Eso es visibility.
display:none es como no dibujarlo desde el principio. Por supuesto, es más rápido en la primera carga.
hay inconvenientes cuando se utiliza display:none sin embargo: cuando se cambia de nuevo a block (o inline etc) que tendrá que empezar a dibujar la pintura, pero utilizando la visibilidad del navegador es sólo arañando la última capa de pintura y es espalda. Entonces visibility es más rápido en este caso.
Pero recuerde una cosa cuando esté usando visibility:hidden el elemento mantiene su posición en el flujo por lo que los elementos a su alrededor no se moverán.
Si desea una explicación técnica, marque David Baron's talk.
Esto es bastante interesante. Entonces, en esencia, visibility: hidden es técnicamente el mismo que opacity: 0?
No soy un creador de navegadores, pero ¿no sería una gran ganancia de rendimiento si los elementos que tienen visibilidad oculta no fueran renderizados o pintados sino pintados como un cuadrado transparente con las dimensiones del elemento? Al menos en situaciones donde las dimensiones eran conocidas.
posible duplicado de [Does opacity: 0 tiene exactamente el mismo efecto que visibility: hidden] (http://stackoverflow.com/questions/272360/does-opacity0-have-excaly-the-same-effect-as- visibilityhidden) – givanse