In this blog, the author aims to explain and demystify the process of reflow. It is an important concept to understand for any web application engineer to build better UIs.
Reflow is a specific process in the browser that recalculates the positions and layout of the document elements. This process occurs in response to specific events, which can be user events or browser events, like:
- Loading the HTML DOM
- Changing the class of an element
- Inserting an element into the tree
- Resizing the browser
- Changing the font
- Inserting a stylesheet into the page
Reflow is a process of organization and structuring; the complexity of which depends on the existing structure of the page, user interaction, and code for handling said user interaction.
Why should you minimize reflow?
Reflow is a blocking operation, which means that the user cannot do anything on the page while it is in process. Frequent reflows cause a poor experience for the user.
It is also an expensive operation for the user’s CPU as a reflow triggered by an element can cause changes to its parent (sometimes, all the way up to the root) and its descendants. Considering that web applications run on a wide variety of devices, many reflows would slow a mobile device down and make the user to leave your site.
Techniques to minimize reflow
The essential idea behind minimizing reflow is that updates to a tree such as a search, insertion or deletion, have an algorithmic complexity of O(log N)
The lower the number of nodes that update, the lower the value of N, and the faster the execution. Also, lower the depth of the tree, faster it is to find the element and apply updates to it.
Some of the reasonable ways to reduce unneeded reflows are:
- When you have to change classes, change it on the element directly or the smallest possible subset of elements. Don’t change classes in a wrapper element as it would cause a reflow of all child elements which may not be needed.
- Avoid too many inline styles as a change in any inline style would cause a reflow.
- When animating, use position: fixed or position: absolute as they don’t affect the layout of other elements and keep the reflow restricted to a small area.
- Avoid JS expressions in CSS or table-layouts.
- Avoid deeply nested DOM structures as it increases the time taken to find a node and apply the updates.
- Avoid complex CSS selectors like `~` or `>,` which try to find a child node and apply styles to it. Instead, apply styles directly to the child elements.
- Use opacity for animating the visibility of an element rather than toggling between display: none and display: block.
So, the developer does not have control over the reflow but can employ best practices while writing applications to make better use of the process. Such best practices, in turn, allow for efficient, lively user experiences. And isn’t that what we all want?
References:
