backflow

  • When the size or structure of the page changes, the document is partially or completely rerendered
  • Backflow occurs when a page performs the following operations:

    • Page first render
    • The browser window is changed
    • .

redraw

  • When elements such as page color change, the document is partially changed, but not extensively rerendered
  • Redraw occurs when the page does the following:

    • The color changes
    • Image changes (size unchanged)
    • .

Difference (Reflux must redraw, but redraw does not necessarily reflux)

  • As a quick thought, rerendering of the document by backflow must cause rerendering of the document elements, but redrawing by element changes, in turn, does not affect the structure of the entire document

    (Somehow I remember this picture)

As we can see from the above, the cost of backflow is much higher than that of redrawing. Is there any way to reduce the number of backflow and reflow?

To optimize the

Browser optimization

  • Since there is a problem, the browser, as an important productivity tool on the front end, will help us solve some of the problems first
  • First of all, the browser will like the Event Loop that generates a queue, then all can produce redrawing and reflux operation in the queue, when the number of operations in the queue or the duration of the queue reaches a certain value, the queue will be carried out in a batch, so that multiple operating merged into one, from a certain extent, reduce the consumption of the performance

Code optimization

  • Of course, browser optimization can solve few problems after all, mainly rely on their own

CSS aspects

  • Animation elements can use absolute or other positioning that takes them out of the document flow
  • Try to avoid multiple layers of inline element nesting
  • Avoid USING CSS expressions
  • .

JS aspects

  • Avoid frequent manipulation of the style property and minimize manipulation if necessary
  • Document Fragments can be used to replace document data without triggering document re-rendering
  • You can set some unnecessary content to display: None; , can be cancelled if necessary, without causing backflow
  • Caching can be used to reduce the number of backflows

If there are any mistakes, please mention them

I hope everyone can get the offer as soon as possible, come on, encourage each other