The process by which a browser renders a page

From the diagram, we can see that the browser renders as follows:

  1. Parse HTML, generate DOM tree, parse CSS, generate CSSOM tree
  2. Combine DOM Tree and CSSOM Tree to generate Render Tree
  3. Layout: According to the generated rendering tree, Layout is carried out to get the geometry information of the node (position, size), according to the geometry information, put the element in the position it should appear
  4. Painting(repainting): Get absolute pixels of nodes based on the rendered tree and geometry information from backflow
  5. Display: Send the pixel to the GPU and Display it on the page.

Reflow/rearrange Reflow

When part (or all) of the Render Tree needs to be rebuilt due to changes in the size, layout, show/hide, etc., this process is called reflow. At least one backflow occurs the first time a page loads.

When backflow occurs

  • Add or remove visible DOM elements
  • The position of the element changes
  • The size of the element changes (including margins, inner borders, border size, height, width, etc.)
  • Content changes, such as text changes or an image being replaced by another image of a different size.
  • Activate CSS pseudo-classes, such as hover
  • Manipulating class attributes
  • Change the font, such as the default font for web pages.
  • When the page is first rendered (which is inevitable)
  • Browser resize (because backflow calculates the location and size of elements based on the viewport size)
  • Calculate the offsetWidth and offsetHeight properties.
<body style="width:50vw">
  <div style="width:50%">
   <div style="width:50%">
     Hello word
   </div>
  </div>
</body>
Copy the code

redraw

When some elements in the Render Tree need to update their attributes, these attributes only affect the appearance and style of the element (but the width, height, position, etc.), such as: outline, visibility, color, background-color…… And so on. This process is called repaint.

Redraw and reflow

When rewinding, the browser invalidates the affected portion of the Render Tree and reconstructs that portion of the render tree. When rewinding is complete, the browser redraws the affected portion to the screen, a process called redrawing. Therefore, backflow must cause redrawing, and redrawing does not necessarily cause backflow. We can think of a page as a blackboard with a little flower drawn on it. Now we are going to move this one from left to right, so should we first determine the exact position of the right, draw the shape (reflux), and then paint it in its original color (redraw).

var ele = document.body ele.style.padding = '15px'; // Backflow + redraw ele. Border = '1px solid red'; // backflow + redraw ele. Background = "#fef3fe"; / / redrawCopy the code

If the above code, the browser kept back + re-paint, likely performance overhead is very large, in fact the browser will optimize the operation, will cause re-flow and re-paint all operations in a queue, waiting queue reaches a certain quantity or time interval, will flush the queue, one-time deal with all the re-flow and re-paint.

There are browser optimizations, but when we ask the browser for some style information, the browser flusher the queue in advance to make sure we get the exact value

  1. offsetTop/Left/Width/Height
  2. scrollTop/Left/Width/Height
  3. clientTop/Left/Width/Height
  4. width,height
  5. GetComputedStyle (), or currentStyle of IE

debugging

F12 Open the console -> DevTools -> Show Console drawer -> Rendering -> Select Paint Flashing.

  1. Paint Flashing: Highlights (green) the redrawn page area
  2. Layer Boders: Displays Layer borders (orange/live) and blocks (cyan). We know that a page is composed of multiple layers, and the final display is the result of multiple layers stacked together. CSS’s Z-index mechanism is a good example of this.
  3. FPS Meter: Displays drawing frames per second, frame rate distribution, and GPU memory. For those of you who play the game, this option is more about analyzing page interaction and animation performance.
  4. Scrolling performance issues: Highlight elements (turquoise) that slow Scrolling, including touch&Whell event handlers and other mainline Scrolling. It is mainly used to analyze rolling performance.

Reduce backflow and redraw

Opera cited Reflow and Repaint as one of the top three reasons for slowing down JavaScript.”

How to reduce the

  1. Reduce unnecessary DOM depth. Because changing any level of the DOM node tree affects every level of the tree — from the root node all the way up to the modified child node. Unnecessary node depth will result in more time spent performing backflow.
  2. Simplify the CSS and remove unnecessary CSS
  3. If you want to change a complex presentation, such as animation, do it outside of the flow line. Use position-absolute or position-fixed to do this.
  4. Avoid unnecessarily complex CSS selectors, especially using child selectors, or consuming more CPU for selector matching.
  5. Avoid table layouts. Avoid table layouts. If you need some additional reasons to avoid tables, they often require multiple gateways before the layout is fully established, because tables are a rare element that can affect the display of DOM elements that have been entered before them. Imagine that the column size changes completely because the contents of the last cell of the table are too wide
  6. Keep DOM operations “atomic” :

Bad

Good

  1. Batch operations use temporary variables
// bad
for (let i = 0; i < 10; i++) {
  el.style.left = el.offsetLeft + 5 + 'px'
  el.style.top = el.offsetTop + 5 + 'px' 
}
// good
let left = el.offsetLeft
let top = el.offsetTop
for (let i = 0; i < 10; i++) {
  left += 5
  top += 5 
}
el.style.left = left + 'px'
el.style.top = left + 'px'
Copy the code
  1. DocumentFragment: temporarily create a DocumentFragment, we put all the nodes to be created together into the container, when the nodes are created, we add the contents of the container to the page (to trigger a backflow).

The DocumentFragment node is not part of the document tree and the inherited parentNode property is always null. When a DocumentFragment node is requested to be inserted into the document tree, instead of the DocumentFragment itself, all of its descendants are inserted. This makes the DocumentFragment a useful placeholder for temporarily storing nodes that are inserted into the document at once. It also facilitates cutting, copying, and pasting of documents. ,

let frag = document.createDocumentFragment();
frag.appendChild(liBox)
item.appendChild(frag)
Copy the code
  1. Use classList instead of className. When className is assigned, it will always display rendering once. ClassList add and remove, the browser does that

Determine whether style names exist to reduce repetitive rendering

Advanced: Painting optimization

In high-end browsers, the behavior of painting is that the CPU prepares textures for the GPU, which can take advantage of the GPU. 1. Texture cache 2. Graphics layer

| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |