Reflow i Repaint

Reflow refers to the process of recalculating the layout (triggering the layout process) when a part or the entire page changes. See the section titled "Browser: Layout," where this process is explained in detail. It is important for developers to understand how to reduce or minimize reflow time.

Repaint is the process of re-rendering elements on the screen. Repaint can be triggered by a reflow process (when dimensions or positions of elements are recalculated) or by a style change (such as background-color, border-color, or visibility) without triggering a reflow. The repaint process involves executing the paint operation again, which is explained in detail in the "Browser: Paint" section.

When certain changes occur, a reflow is triggered on one or more elements, requiring the recalculation of their dimensions and positions on the screen. Triggering a reflow on an element will also trigger reflow on all its nested (child) elements and any other elements below it in the DOM hierarchy. After reflow is complete, the repaint process is triggered to display these changes on the screen. Reflow can be easily triggered in code, but it is a costly process, especially because it is often followed by a repaint.

Note that certain actions will trigger only a reflow and not a repaint (mainly JavaScript properties that calculate element dimensions, such as getComputedStyle()), while others will trigger only a repaint and not a reflow (e.g., changing an element's color). However, in most cases, reflow will also trigger repaint.
There are many possible reasons for triggering reflow. These include resizing the browser window, changing fonts, updating stylesheets or CSS rules, activating pseudo-classes like :hover, and manipulating DOM elements. Some operations may cause longer reflow times than others, and different browsers handle reflow differently for the same operations. Additionally, certain CSS measures, such as percentages, the auto property, and em units, can increase reflow time due to the calculations required.

Fortunately, modern browsers perform internal optimizations to minimize or mitigate the effects of reflow. For example, they wait to accumulate several changes and then execute them all in a single reflow and repaint operation. Today's computers are fast enough that these processes occur quickly, and users generally do not notice them. A normal level of reflow is acceptable.

What causes reflow:

• Inserting, removing, or updating an element in the DOM (DOM manipulation).
• Modifying content on the page, including text changes in form fields.
• Animating a DOM element.
• Measuring an element (e.g., offsetHeight or getComputedStyle()).
• Changing a CSS style.
• Changing an element's className.
• Adding or removing a stylesheet.
• Resizing the browser window.
• Scrolling.
• Activating pseudo-classes like :hover.

JavaScript properties and methods that trigger reflow (but not repaint):

    elem.getBoundingClientRect(),    elem.getClientRects()
    elem.offsetLeft,                 elem.offsetTop,
    elem.offsetWidth,                elem.offsetHeight, 
    elem.offsetParent,               elem.clientLeft,
    elem.clientTop,                  elem.clientWidth,
    elem.clientHeight,               window.innerHeight,
    window.innerWidth,               window.getMatchedCSSRules()

JavaScript properties and methods used for scrolling:

    elem.scrollBy(),         elem.scrollTo()
    elem.scrollIntoView(),   elem.scrollIntoViewIfNeeded()
    elem.scrollWidth,        elem.scrollHeight
    elem.scrollLeft,         elem.scrollTop 
    window.scrollX,          window.scrollY

Below are tips (divided into HTML, CSS, DOM, and JavaScript categories) on how to optimize code and avoid practices that negatively impact performance by triggering reflow and repaint.

Browser Rendering Optimization

When a visual change occurs on a webpage, several browser processes must be executed to display the change on the screen. This sequence of processes is called the "Pipeline" and typically includes the following steps:

• JavaScript – Initiates the visual change on the screen. Note: The change doesn’t always have to be caused by JavaScript; it can also be triggered by CSS animations, the Web Animation API, SVG, Canvas, jQuery, or another script.
• Style Recalculation – Determines which CSS rules apply to each element based on matching selectors. Once the rules are identified, they are applied, and the final styles for each element are calculated.
• Layout – The browser calculates the dimensions and positions of every element in the browser window. The layout model of the web means that one element can affect others. For example, the width of the <body> element typically affects its children’s widths and so on throughout the tree, making this process computationally intensive for the browser.
• Paint – Painting is the process of converting vectors from memory into pixels on the screen. This includes drawing text, colors, images, borders, shadows, and every visual aspect of the elements. Painting is typically done onto multiple surfaces or layers.
• Compositing Layers – Combines the pre-rendered layers to display them on the screen in the correct order. This ensures that overlapping elements are rendered correctly, preventing visual errors.