What is reflux?

  • Reflux occurs when the width and height of an element itself, its layout, display or hiding, or the text structure within the element changes, causing the page to be rebuilt

What is a redraw?

  • A redraw occurs when an element’s own width, height, layout, and display or hiding do not change, but merely the appearance and style of the element

When will the backflow take place?

  • When adding or removing visible DOM elements
  • The position of the element changes
  • The size of the element changes
  • Content change
  • The first time the page is rendered
  • List some related CSS styles: width, height, line-height, padding, margin, diaplay, border, top, position, float, font-size, overflow, etc

When will it be redrawn?

  • List some relevant CSS styles: color, background, background-size, visibility, and box-shadow

How to optimize performance?

  • Transform instead of top, left, margin-top, margin-left… These displacement properties
  • Instead of using JavaScript code to set multiple styles to DOM elements, choose a single ClassName instead
  • Do not get DOM styles in the loop such as offsetWidth, offsetHeight, clientWidth, clientHeight, etc. Browsers have a buffer mechanism for backflow, which occurs when these properties are retrieved
  • Instead of setting multiple layers of inline styles, write an external class so that it reflows only once
  • Take elements that reflow multiple times out of the document stream, such as animations, using the fixed or absolute value of the position attribute
  • Change together (modify all properties that need to change at the same time)

additional

  • This article is published through multiple platforms of “We Media” and will not be maintained after publication. If you have any objection to the content, you can discuss it in the GitHub below
  • The ongoing maintenance / 500 + face questions before update/notes 】 https://github.com/noxussj/In…
  • [3D city modeling using three. JS (Zhuhai City)] https://3d.noxussj.top/