How Does `display: none` and `visibility: hidden` Differ in Their Impact on DOM Reflow?

DOM Reflow: Definition and Implications

In web development, the DOM (Document Object Model) represents the structure of an HTML document. DOM reflow is a process that recalculates the layout of the page when changes are made to the DOM.

The statement you encountered highlights the distinction between two CSS properties, display: none and visibility: hidden. While both properties conceal elements, they have different effects on the DOM. display: none triggers a reflow, while visibility: hidden does not.

Understanding DOM Reflow

Reflow involves recalculating the size and position of elements in the page. It affects the affected element and its descendants. Once the reflow is computed, a repaint (the process of drawing the changes to the screen) is triggered.

Reflow Triggers

Reflows occur under various circumstances, including:

• Inserting, removing, or updating DOM elements
• Modifying content (e.g., input text)
• Moving DOM elements
• Animating DOM elements
• Measuring element properties (e.g., offsetHeight)
• Changing CSS styles or classes
• Adding or removing stylesheets
• Resizing the browser window
• Scrolling

Impact of Reflows

Reflows are performance-intensive operations. They can cause significant delays in page rendering, especially if they are triggered frequently. To optimize performance, developers should minimize reflows by:

• Using visibility: hidden instead of display: none when possible
• Grouping DOM modifications into single operations
• Using CSS techniques like position and transform instead of DOM manipulation
• Limiting DOM API calls for measuring elements

Additional Resources

For more detailed information, refer to the following resources:

• Repaints and Reflows: Manipulating the DOM responsibly: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/reflow-restyle-repaint

The above is the detailed content of How Does `display: none` and `visibility: hidden` Differ in Their Impact on DOM Reflow?. For more information, please follow other related articles on the PHP Chinese website!