What is rearrangement and redrawing?

Layout:

Rearrangement is the process by which the browser calculates the geometry of each element: its size and position on the page. Each element will have explicit or implicit size information, depending on the CSS used, the content of the element, or the parent element. This process is called Layout in Chrome, Opera, Safari, and Internet Explorer. It’s called Reflow in Firefox, but the process is actually the same.

Trigger Layout:

When you change the style, the browser checks if any changes need to be computed for the layout and if the render tree needs to be updated. The geometric properties “” (width, height, top, left…) All changes require layout calculations.

⭐note: Layout almost always affects the entire document. If you have a large number of elements, it will take a long time to figure out the position and size of all the elements.

Layout optimization scheme:

  • The Flexbox layout model provides faster performance than the floating-based layout model.
  • Simplify DOM nodes.
  • Read/write separation retrieves the element’s style value (the browser can use the layout value of the previous frame), and then changes the element’s style. Take a look at this code:
function resizeAllParagraphsToMatchBlockWidth() {
  // Causes the browser to enter a read-write-read-write loop.
  for (var i = 0; i < paragraphs.length; i++) {
    paragraphs[i].style.width = box.offsetWidth + 'px'; }}Copy the code

This code loops through a set of paragraphs and sets the width of each paragraph to match the width of an element called “box.” This seems harmless, but the problem is that each iteration of the loop reads a style value (box.offsetwidth) and immediately uses that value to update the width of the paragraph (what’s more). On the next iteration of the loop, the browser must take into account the fact that the style has changed, because offsetWidth was requested last time (in the last iteration), so it must apply the style change and then run the layout. This happens every iteration!

This example optimizes again by reading the value first and then writing the value:

// Read.
var width = box.offsetWidth;

function resizeAllParagraphsToMatchBlockWidth() {
  for (var i = 0; i < paragraphs.length; i++) {
    // Now write.
    paragraphs[i].style.width = width + 'px'; }}Copy the code

Paint:

Drawing is the process of filling pixels that are eventually composited onto the user’s screen. The process of redrawing an element when its appearance is changed without changing its layout is called redrawing.

Trigger the paint:

Changing any property other than transform or opacity always triggers a drawing.

Optimization of Paint:

The best way to create a new layer is to use will-change CSS properties. This method works on Chrome, Opera, and Firefox, and a new synthesizer layer will be created from the value of transform:

.moving-element {
  will-change: transform;
}
Copy the code

For browsers that do not support will-change but benefit from layer creation, such as Safari and Mobile Safari, 3D deformation is required to force the creation of a new layer:

.moving-element {
  transform: translateZ(0);
}
Copy the code

⭐ Note: Do not create too many layers, as each layer requires memory and administrative overhead.

How do I avoid frame drops caused by reflow and repaint

Repeated redrawing and rearrangement may cause frames to drop because JS execution may block the main thread;

You are advised to use CSS3transform.opacityThe property implementation animation does not go through layout and drawing, but runs directly in the synthesizer thread and rasterized thread, unaffected by the main thread.

Resources: Trigger the CSS property csStriggers.com for Layout and Paint