This article is perfect for review, as well as for interviews. I also found an excellent introductory article at the bottom of the page for those with no foundation

The browser renders as follows:

  1. Parsing HTML to generate a DOM tree
  2. Parse the CSS and generate a CSS tree
  3. Combine DOM tree and CSS tree to generate render tree
  4. Node layout
  5. Page rendering

Redraw and reflow

Rendering process parsing:
  • HTML is generated when the browser parses itDOMTree, parsing CSS is generatedCSSTree, then merged into a render tree.
  • Pay attention to!!!!! The render tree will only contain visual nodes, such asScript, head, meta, linkThese non-visual nodes will not contain, and certainly will not contain, a style ofdisplay:none;The node.
  • The browser layouts according to the render tree. The browser calculates the exact position and size of each node in the view, and all relative values are converted into absolute pixels on the screen to display the page, a process commonly known as backflow and redraw.
  • Backflow and redraw occurs at least once per page, and when the page starts to load, the browser needs to lay out and render according to the render tree.
Reflow:
  • Backflow occurs when a node style change affects the layout of the page. This is equivalent to refreshing the page (such as width and height, border size, inside and outside margins, etc.).
  • Js additions, deletions, and changes to DOM elements also generate backflow. Changing the DOM can easily lead to changes in the overall layout.
Repaint:
  • Redraw occurs when the node style changes without affecting the layout. Only styles (such as colors, transparency, backgrounds) are updated dynamically.
  • Redrawing has little effect on reflux performance

Redraw does not necessarily cause backflow, backflow certainly causes redraw

Ways to reduce backflow and redraw:

CSS:
  • Do not use other styles to control nodes if you can use transform. Transform does not cause backflow and redrawing.
  • Use display: None sparingly, not none if you can use visiblity. Of course, it is best to use opacity instead because it will not cause backflow or redrawing.
  • By turning on layers (z-index) to reduce backflow and redraw, browsers will use separate renderings for different layers
  • For complex animations to be sure to take them out of the document stream, you can use absolute positioning, which opens a new stream, which will only “backflow and redraw” this small part of the animation.
JavaScript:

  • To frequently add a DOM, you can use createDocumentFragement to add the document fragment before adding it to the DOM element.

  • Js frequently toggles styles. You can toggle class instead.

  • Js animation using the requestAnimationFrame API, try not to use timers.

  • Reduce the use of the following apis. Using the following API to get the latest style will clear the change history stored in the queue, causing backflow and redrawing.

    • OffsetTop, offsetLeft, offsetWidth, offsetHeight
    • ScrollTop, scrollLeft, scrollWidth, scrollHeight
    • ClientTop, clientLeft, clientWidth, clientHeight
    • getComputedStyle()
    • getBoundingClientRect

Zero base here

For zero-based partners, you can read the article I recommend here first, and then I will read my concise summary.

  • Juejin. Cn/post / 684490…
You can also follow me if you are interested:

CNSD: m0_46217225

Nuggets: buzz cut boy

Making: Buzz_cut

Wechat official account: web_mycode

Man with a buzz cut

My QQ: 2356924146

I will continue programming dry stuff.