Reflow Repaint
From the initial contact with CSS and HTML, heard of re-flow and re-paint, then simply know one is size location changes, such as another changes because of the appearance style, did not do in-depth fastidious, what situation will cause re-paint, what will cause reflux, did a detailed summary, Today we will review and summarize together.
A concept,
First, let’s review the process by which a browser renders a page. The rendering engine first gets the content of the requested document over the web, usually in 8K chunks. Here is the basic flow of the rendering engine after it gets the content:
Parse the HTML to build the DOM tree -> build the Render tree -> layout the Render tree -> Draw the Render tree
Next we’ll look at a few concepts, and then we’ll get to the concept of backflow and redraw
DOM tree: a data structure that the browser parses HTML into a tree (including display: None nodes)
CSS rule Tree: Browsers parse CSS into Tree data structures
3, Render Tree: generated after merging DOM Tree and CSSOM Tree (excluding display: None, head node, but including visibility:hidden node)
4, Layout: With Render Tree, the browser already knows what nodes are in the page, the CSS definition of each node and their dependencies, so as to calculate the position of each node in the screen.
Use the graphics card to paint the content on the screen according to the calculated rules
When the browser finds that something has changed that affects the layout and needs to go back and rerender, this process is called reflow. Reflow will recursively calculate the geometry and position of all nodes starting from the root frame. Reflow is almost inevitable. Some of the effects currently present in the interface, such as the collapse and expansion of tree directories (essentially the display and hiding of elements), will cause reflow in the browser. Mouse slide, click… As long as these behaviors cause changes in the space area, positioning mode, margin and other attributes of some elements on the page, it will cause it to be inside, around or even the whole page to be re-colored. It is often impossible to predict which parts of the code the browser will reflow, and they all affect each other.
When you change an element’s background color, text color, border color, etc., without affecting its surrounding or interior layout, a portion of the screen is repainted, but the element’s geometry remains the same.
In a word: redrawing does not necessarily cause redrawing
Second, the trigger
Reflux (Reflow)
An operation that causes backflow:
- Page renders for the first time 2) browser window size changes 3) element size and position changes 4) element content changes (number of text or font size or image size…)
- Add delete (visible Dom)
- 7) Query some properties or call some methods
- Manipulating class attributes
- Script manipulation of DOM
- Calculate the offsetWidth and offsetHeight properties
- Setting the style property
ClientWidth, clientHeight, clientTop, clientLeft offsetWidth, offsetHeight, offsetTop, offsetLeft ScrollWidth, scrollHeight, scrollTop, scrollLeft scrollIntoView(), scrollIntoViewIfNeeded() getBoundingClientRect() scrollTo()
Flush queues are optimized by the browser itself, and if every Javascript sentence is redrawn to the DOM, the browser may not be able to tolerate them. So many browsers optimize these operations by maintaining a queue and putting all the operations that cause backflow and redraw into this queue. When the number of operations in the queue reaches a certain number of times, or at a certain interval, the browser flush the queue and perform a batch. This will turn multiple backflow and redraw into a single backflow redraw.
There are exceptions, however, because sometimes we need to get some style information exactly, like the following:
offsetTop, offsetLeft, offsetWidth, OffsetHeight scrollTop/Left/Width/Height clientTop/Left/Width/Height Width, Height request getComputedStyle (), Or the currentStyle of IE, where the browser needs to redraw immediately to make sure that the information it’s giving us is accurate, may cause the flush queue to execute prematurely
Redraw (Repaint)
conclusion
Reflux is more expensive than drawing.
How to avoid backflow and redraw
css
1. Avoid table layout. Change the class at the very end of the DOM tree whenever possible. 3. Avoid multiple inline styles. 4. Apply the animation effect to an element with position as absolute or fixed. 5. Avoid CSS expressions (e.g., calc()).
javascript
Avoid manipulating styles too often. Better to override the style property once, or define the style list as class and change the class property once. 2. Avoid frequent DOM manipulation. Create a documentFragment, apply all DOM manipulation to it, and then add it to the document. 3. You can also set display: None to the element and display it after the operation is complete. Because DOM operations on elements with the display attribute none do not cause backflow and redraw. 4. Avoid frequently reading properties that cause backflow/redraw, and if you do need to use them more than once, cache them in a variable. 5. Use absolute positioning for elements with complex animations to keep them out of the document stream, otherwise it will cause frequent backflow of parent elements and subsequent elements.
Note:
(1) nodes that display:none will not be added to the Render Tree, and visibility: hidden will, so if a node is not initially displayed, it is preferable to set display: None.
(2) Display: None will trigger reflow, and visibility:hidden will only trigger repaint because no position changes have been found.
(3) In some cases, such as changing the style of an element, the browser does not reflow or repaint immediately. Instead, it will accumulate a batch of these operations and then do a reflow. This is also called asynchronous reflow or incremental asynchronous reflow. However, in some cases, such as the resize window, the default font of the page is changed. For these operations, the browser reflow immediately.
(4) Due to the use of streaming layout by browsers, the calculation of Render Tree can usually be completed only once, except for table and its internal elements, which may require multiple computations and usually take three times as long as the same elements. This is one of the reasons why we should avoid using table layout.
Don’t be bored with the familiar, make a little progress every day; Don’t be afraid of new things. Learn a little every day.