The browser’s rendering process
- Parse HTML files to generate DOM trees, parse CSS files to generate CSSOM trees
- Combine THE DOM Tree with the CSSOM Tree to generate the Render Tree
- Layout: Determine the geometry of the nodes (size and position) based on the generated render tree
- Painting (repainting) : Determine the absolute pixels of the nodes (color, etc.) based on the geometry of the rendered tree that has been reflow
- 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
- Initial rendering of the page, which inevitably leads to rearrangement, is the most costly
- Remove/add DOM elements
- The element size changed
- The position of the element changes
- Text inside the element, font size changed
- Element content changes, such as text increases, or images of different sizes
- The browser viewport is changed. Procedure
- 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
offsetTop | offsetLeft | offsetHeight | offsetWidth |
scrollTop | scrollLeft | scrollWidth | scrollHeight |
clientTop | clientLeft | clientWidth | clientHeight |
getcomputedStyle() | getBoundingClientRect() |
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
- Using display: none
- Create a DOM fragment using the documentFragment and batch manipulate the DOM on it
- 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/…