preface

What is redraw and reflow? What is redraw and backflow? If you want to know what is redraw and backflow, I’ll take you through it now. Backflow always causes redrawing, but redrawing does not necessarily cause backflow.

The browser’s rendering mechanism

Build A DOM tree Build a CSSOM tree Merge A DOM tree and a CSSOM tree Merge to generate a Render tree Generate a Render tree from a Render Tree (Reflux) Generate a Render tree from a Layout Generate a Render tree (redraw) Create a composite layer from a render tree display on the screenCopy the code

redraw

Redraw refers to rendering that changes appearance attributes without affecting geometry.

backflow

The need to change layout or geometry properties is called backflow. For example, when a DOM node changes, the page needs to be re-rendered. Several properties that trigger backflow

  • Box model related attributes: width, height, margin, display, border, etc
  • Position properties and float related properties: top,position,float, etc
  • Change the internal text structure of a node: text-align,overflow,font-size,line-height,vertival-align, etc

operation

  • When the page renders
  • DOM manipulation
  • Content changes
  • Browser window size changes
  • CSS pseudo-classes

Several actions that can cause performance problems

  1. Change window size
  2. Change the font
  3. Add or remove styles
  4. Text change
  5. Position or float
  6. The box model

How to reduce redrawing and reflow

  • Avoid changing styles item by item. It is best to change the style property once, or define the style list as class and change the class property once.
  • Avoid looping the DOM. Create a documentFragment or div, apply all DOM operations to it, and finally add it to window.document.
  • Avoid cyclic reading of properties such as offsetLeft. Save them before you loop.
  • Absolutely locate elements that have complex animations. Absolute positioning removes it from the document liu, which would otherwise cause massive backflow of the parent and subsequent elements.

Amway has a great collection of books about the art of CSS, which gives you a new understanding of CSS. The content of this article is mainly a general situation, there may be insufficient or there are problems, you are welcome to put forward suggestions, actively respond to the gold digging activities, this article is participating in the “gold digging pamphlet free learning!” Event, click to view details of the event