Today we introduce to you the concepts of reflow and redraw involved in the web front-end , let's take a look at the official definition:
Reflow: Each element in the DOM structure has its own box model, which requires the browser to calculate according to various styles (browser, developer-defined, etc.) and place elements in it according to the calculation results The position that appears, this process is called reflow;
Repaint: When the position, size and other attributes of various boxes, such as color, font size, etc., are determined, the browser then draws these elements according to their characteristics, and the content of the page appears Now, this process is called repaint.
In fact, to put it simply:
Reflow is when the position of an element changes (whether it is adding or deleting an element, or changing the size of an element), it will trigger a reflow. For example, there are two p tags, and we want to insert another p tag between the two p tags
At this time, the boss is still the boss. After inserting a new second child, the original second child becomes the third third, and the position change will trigger the return.
So simply repainting, the position of the element will not change, and the visual effect will change.
The position of the element has not changed, only the text color has been modified, and redrawing has occurred at this time. Knowing about reflow and redrawing, we should try to avoid it in the process of doing the project, so that we can write high-performance DOM. For example: when we add style decorations to elements, avoid one by one change
You can put the decoration into a class name and do a class name insertion
And when we want to insert many DOM elements in a loop, we can use documentFragment
This article is from Qianfeng Education , please indicate the source for reprinting