Reflux must have redraw, redraw does not necessarily have reflux

A, definitions,

  • Backflow: Geometry property changes, such as element position, size changes

    CSS properties: 1, box model related properties: width, height, margin, display, border, etc. 2, positioning properties and float related properties: Top, position, float, etc. 3, internal text structure: Text-align, overflow, font-size, line-height, vertical-align 1, the first rendering of the page 2, delete or add elements 3, CSS pseudo-class activation, such as hover etc. 4, query element geometry information, Such as call getBoundingClientRect, offsetWidth, offsetHeight, scrollTop, widht, height, getComputedStyle etc. 5, the content changes, such as text is replaced 6, the browser size change

  • Repaint: The process of filling pixels, changing their appearance. For example, background color, background, border, children, outline CSS properties: 1, background-color 2, visiblity 3, outline

Two, avoid method

  1. Avoid table layouts

  2. Avoid changing CSS properties in batches, such as

const a = document.getElementById('a')
a.style.width = '10px'
a.style.height = '10px'
a.style.marginTop = '10px'
Copy the code

Can be changed to

const a = document.getElementById('a') a.style.cssText += 'width: 10px; height: 10px; marginTop: 10px'Copy the code

  1. Reduce animation complexity by using transform instead of position changes and OpCity instead of Visiblity as much as possible. Transform and OpCity will skip layout and painting and be composite directly

  2. Use display: None to simulate deleting or adding elements

  3. To avoid reading geometry information of the same element repeatedly, use variables to store it temporarily