html - ¿Qué es el reflujo DOM?

css visibility

Question

Estaba leyendo sobre la diferencia entre dos propiedades de display:none CSS display:none y visibility:hidden término de reflujo DOM visibility:hidden y encontrado.

La declaración fue

display: none provoca el reflujo DOM donde está la visibility: hidden no.

Entonces mi pregunta es:

¿Qué es el reflujo DOM y cómo funciona?

Answer 1

Reflow es el nombre del proceso del navegador web para volver a calcular las posiciones y las geometrías de los elementos en el documento, con el fin de volver a representar parte o la totalidad del documento.

https://developers.google.com/speed/articles/reflow

display:none oculta el div como si el div no se representara mientras que la visibility:hidden solo se oculta pero el espacio aún está ocupado

Answer 2

Un reflujo calcula el diseño de la página. Un reflujo en un elemento vuelve a calcular las dimensiones y la posición del elemento, y también desencadena más reflujos en los elementos secundarios, ancestros y elementos de ese elemento que aparecen después en el DOM. Luego se llama una pintura final. El reflujo es muy costoso, pero desafortunadamente se puede activar fácilmente.

El reflujo ocurre cuando usted:

• insertar, eliminar o actualizar un elemento en el DOM
• modificar el contenido de la página, por ejemplo, el texto en un cuadro de entrada
• mover un elemento DOM
• animar un elemento DOM
• tomar medidas de un elemento como offsetHeight o getComputedStyle
• cambiar un estilo CSS
• cambiar el className de un elemento
• agregar o eliminar una hoja de estilo
• cambiar el tamaño de la ventana
• Desplazarse

Para obtener más información, consulte aquí: Repintos y reflujos: manipulación responsable del DOM

Answer 3

Significa que si configurará display: none; , su navegador volverá a calcular las posiciones de los elementos DOM, si la visibilidad está oculta; - no Piense, porque la visibility: hidden; no cambia el tamaño de los elementos en DOM.