I. Introduction
When we change our DOM structure or set a style for the DOM structure, reflow and redrawing will be triggered, but whether different style changes will trigger reflow and redrawing is uncertain. It is necessary for us to deeply understand reflow and redraw, and performance can be improved by reducing reflow.
Understand the browser's parsing and rendering mechanism:
(1). Parse HTML, generate DOM tree, parse CSS, generate CSSOM tree
(2). Combine the DOM tree and the CSSOM tree to generate a render tree (Render Tree)
(3). Layout (reflow): According to the generated rendering tree, reflow (Layout) is performed to obtain the geometric information (position, size) of the node
(4).Painting (redrawing): According to the geometric information obtained by the rendering tree and reflow, the absolute pixel of the node is obtained
(5).Display: Send the pixels to the GPU and display them on the page
2. Rearrangement (reflux)
When the change of DOM affects the geometric information (size, position) of the element, the browser recalculates the geometric information (position) of the element and displays it correctly on the browser. This process is called rearrangement, also called redrawing.
Under what circumstances will a rearrangement be triggered?
(1). Add or remove visible DOM elements (display:none;display:block)
(2). The size of the element changes (width and height, outer border margin, inner border padding)
(3). The change of the content of the element will also cause the geometric information of the element to change
(4). The position of the element (adjust the position of the element by positioning)
(5). When the page starts to render
(6). The window size of the browser changes
In addition, when we get some specific values, the browser will also be triggered to reflow, as follows:
offsetTop, offsetLeft, offsetWidth, offsetHeight, scrollTop, scrollLeft, scrollWidth, scrollHeight, clientTop, clientLeft, clientWidth, clientHeight, in addition to getComputedStylemethods, the principle is the same
3. Redraw
When the appearance of an element is changed, but does not affect the arrangement and distribution of the element, the process of the browser redrawing it is called redrawing, such as some css styles, color, background color, and text direction modification, shadow modification
4. How to reduce rearrangement?
(1). If you want to set the style of the element, change the class name of the element (as far as possible in the innermost layer of the DOM tree) (2). Avoid
setting multiple inline styles
(3). Apply the animation of the element, Use the fixed value or absolute value of the position attribute (as mentioned in the previous example)
(4). Avoid using the table layout. The size and content of each element in the table will cause the entire table to be recalculated
(5). For those For complex animations, set position: fixed/absolute to keep elements out of the document flow as much as possible, thereby reducing the impact on other elements (6). Using
css3 hardware acceleration, animations such as transform, opacity, and filters will not cause Reflow redrawing
(7). Avoid JavaScript expressions using CSS
Example 1: When we want to change the style of an element, we can first hide the element using display:none to reduce the number of browser rearrangements and reduce additional performance consumption
<div></div>
<script>
const div = document.querySelector('div');
// 先将元素隐藏
div.style.display = 'none';
div.style.width = '100px';
div.style.height = '100px';
div.style.border = '10px solid red';
div.style.background = 'red';
// 样式设置完毕
div.style.display = 'block';
</script>Example 2. When we dynamically insert multiple nodes, each inserted node will trigger a browser reflow. If we use the DocumentFragment virtual node, we can reduce the number of browser reflows and ensure the performance of the browser.
<div></div>
<script>
const div = document.querySelector('div');
const fruits = ['Apple', 'Orange', 'Banana', 'Melon'];
// 创建了虚拟DOM节点
const fragment = document.createDocumentFragment();
fruits.forEach((fruit) => {
const li = document.createElement('li');
li.innerHTML = fruit;
fragment.appendChild(li);
});
// 一次性将节点插入到 DOM div的后面
div.appendChild(fragment);
</script>operation result
The newly added DOM result has been added behind the div
Example 3: Combining styles by class name can also reduce the number of reflows.
Before the styles are merged, the styles are operated sequentially through js, and each time an operation is performed, it is possible to perform a reflow or redraw
<div></div>
<script>
const div = document.querySelector('div');
// 先将元素隐藏
div.style.width = '100px';
div.style.height = '100px';
div.style.border = '10px solid red';
div.style.background = 'red';
// 样式设置完毕
</script>When we combine styles, we set the style by manipulating the class name. The effect is achieved with only one rearrangement and redrawing
<style>
.active {
width: 100px;
height: 100px;
background: red;
border: 10px solid red;
}
</style>
<div></div>
<script>
const div = document.querySelector('div');
div.style.background;
</script>Five, the difference between rearrangement and redrawing
Reflow is a more performance-intensive operation because it requires recalculation of the element's geometric properties, layout information, and text flow; while redrawing is a relatively less performance-intensive operation because it only requires redrawing The element's style is fine. Therefore, try to avoid frequent rearrangement operations on the page. You can reduce the number of rearrangements by batch processing multiple DOM operations, thereby improving page performance.