Qué es DOM reflow?
Estaba leyendo sobre la diferencia entre dos propiedades css display:none y visibility:hiddeny encontré DOM reflow term.
La declaración fue
display: nonecausa el reflujo del DOM donde estávisibility: hiddenno.
Así que mi pregunta es:
¿Qué es DOM reflow y cómo funciona?
3 answers
A reflow 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 hijos de ese elemento, antepasados y elementos que aparecen después de él en el DOM. Luego se llama un repintado final. El reflujo es muy caro, pero desafortunadamente se puede activar fácilmente.
El reflujo ocurre cuando:
- 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 nombre de clase de un elemento
- agregar o eliminar una hoja de estilo
- cambiar el tamaño de la ventana
- scroll
Para obtener más información, consulte aquí: Repintes y Reflujos: Manipulación del DOM responsable
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-08-07 06:42:16
Reflow es el nombre del proceso del navegador web para volver a calcular el posiciones y geometrías de elementos en el documento, para el propósito de volver a representar parte o todo el documento.
Https://developers.google.com/speed/articles/reflow
display:none ocultar el div como si el div no se representa mientras que visibility:hidden solo se oculta pero el espacio sigue ocupado
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-12-24 12:51:33
Significa, que si se establece dinámicamente display: none;, su navegador volverá a calcular las posiciones de los elementos DOM, si visibilidad: oculto; - no. Piense, porque visibility: hidden; no cambia el tamaño de los elementos en dom.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-12-24 12:51:35