Backflow and redraw of browsers

The browser’s rendering process

1. Parse HTML files to generate DOM trees, parse CSS files to generate CSSOM trees
2. Combine THE DOM Tree with the CSSOM Tree to generate the Render Tree
3. Layout: Determine the geometry of the nodes (size and position) based on the generated render tree
4. Painting (repainting) : Determine the absolute pixels of the nodes (color, etc.) based on the geometry of the rendered tree that has been reflow
5. Display: Sends pixels to the CPU to be displayed on the page.

CSSOM(CSS Object Modal) : THE CSS Object model is a mapping of all CSS selectors and their related attributes in tree form. It allows users to read and modify CSS styles dynamically

Generate render tree

Note: Render trees only contain visible nodes, such as display: None, which do not appear in the render tree

Reflow/Reflow

When a DOM change causes an element’s geometry (such as position or size) to change, the browser needs to recalculate the element’s geometry, a process called rearrangement.

Trigger a rearranged scene

1. Initial rendering of the page, which inevitably leads to rearrangement, is the most costly
2. Remove/add DOM elements
3. The element size changed
4. The position of the element changes
5. Text inside the element, font size changed
6. Element content changes, such as text increases, or images of different sizes
7. The browser viewport is changed. Procedure
8. Querying certain properties or calling certain methods, such as offsetWidth, getComputedStyle, etc., fires because of the need for “immediacy”.

Rearrangement of the sphere of influence

Browser renderings are based on a streaming layout, so when reordering is triggered, it affects the elements around it. There are two ranges of influence

Global scope: Rearranges the entire render tree, starting from the root node. Local: Rearranges a part of the render tree or a render object

Local scope rearrangement: If the geometry of a DOM is completely fixed and then rearranged inside the DOM. External elements are not affected.

Redraw (Painting)

When the appearance of an element is changed but the layout is not changed, the process is called redrawing.

Rearrangement and redrawing

Redraw: The appearance of some elements has been changed

Rearrange: Regenerate the layout and rearrange the elements.

As above, simply changing the appearance of an element generally does not change the layout of the element, that is, does not result in rearrangement. However, if the browser completes the rearrangement, you need to redraw the parts affected by the rearrangement. Therefore, rearrangement does not necessarily lead to redrawing, and redrawing does not necessarily lead to rearrangement

Rearrangement optimization

As you can see, rearrangements are very performance intensive and have a significant impact on the user experience. Therefore, we need to minimize rearrangements

Browser optimization mechanisms

Most browsers optimize and reduce reordering by queuing changes and executing them in batches. The browser will queue the changes, and when the threshold is reached, it will requeue and clear the queue. However, retrieving layout information forces a queue refresh

Specific reference gist.github.com/paulirish/5…

Reduce redrawing and rearrangement

1. Reduce the number of redrawing and rearrangement, and change the style concentration

const el = document.getElementById(‘test’) el.style.padding = ‘5px’ el.style.borderLeft= ‘1px’ el.style.borderRight = In the ‘2px’ example, there are three style attributes that have been changed, each of which affects the element’s geometry and causes a rearrangement. Above, the browser has optimized it, only triggering the rearrangement. If the browser is on an older version, this will result in three rearrangements.

So, we can do the following: use cssText

const el = document.getElementById('test')
el.style.cssText += 'border-left: 1px; border-right: 2px; padding: 5px; '
Copy the code

Using the className

const el = document.getElementById('test')
el.className += 'active'
Copy the code

2. Separate read and write operations

When we access some of the attributes of the element, it causes the browser to force the queue empty and the layout to be synchronized. For example

const el = document.getelementById('test')
el.style.left = el.offsetLeft + 1 + 'px'
el.style.top = el.offsetTop + 1 + 'px'
Copy the code

As above, reading and writing elements’ geometry information synchronously causes the browser to rearrange itself repeatedly

const el = document.getElementById('text')
const left =  el.offsetLeft
const top = el.offsetTop

el.style.left = left.+ 1 + 'px'
el.style.top = top + 1 + 'px'
Copy the code

If we change to read before write, only one rearrangement will be triggered

3. Batch modify DOM

If we want to modify a node repeatedly, we can remove the node from the document flow, perform the modification, and then insert the document flow

1. Using display: none
2. Create a DOM fragment using the documentFragment and batch manipulate the DOM on it
3. Copy the node, operate on the replica, and then replace the original node

Note: This approach is not effective in modern browsers because of their queue merge processing

4. Absolutely locate out of the document flow

If you have an element, its geometry changes frequently, as in an animation. You can take it out of the document flow, absolutely positioned. In this way, its rearrangement occurs only locally and does not result in frequent rearrangements of the parent and neighboring elements

5. Css3 hardware acceleration (GPU acceleration)

Using CSS3 hardware acceleration, transform, opacity, and filters can be enabled without backflow redrawing. Other properties of animations, such as background-color, can cause backflow redraw, but it can also improve the performance of those animations.

conclusion

Layout,Paint,Composite Layers -Leonard: Layout. This is all done in the CPU. Composite Layers: The CPU transfers the generated BitMap to the GPU and renders it to the screen.

Reference link: juejin.cn/post/684490… Github.com/chenjigeng/…