Rearrangement: The process of retriggering the layout to update the entire rendering process after updating the geometry of the elements. Some situations that can cause reordering operations:

Add/remove DOM elements visible elements change the position of the element size change (from the outside, inside the frame, frame, height and width) content changes (text, images, is replaced by a different size of the image) browser window size (reflux is according to the size of the viewport to calculate the location and size of the element)Copy the code

Depending on the extent and degree of change, large or small portions of the render tree need to be recalculated, with some changes triggering a rearrangement of the entire page (for example, when a scrollbar appears, modifying the root node).

Redraw: without causing any geometry changes, the browser goes directly to the layer return stage and executes the subsequent rendering process. The key point is that the updated drawing attributes will not cause changes in geometric positions. For example, if the background color or text color of elements is modified, the rendering line will be updated from the layer drawing stage. Compared with the rearrangement operation, the redrawing saves the layout and layering stage, and the execution efficiency is higher than the rearrangement operation.

Rearrangement does redraw, redrawing does not necessarily rearrange.

Composition: If you modify a property that does not lay out or draw, the rendering engine skips the layout and layer drawing stages and only performs subsequent composition, a process called composition. Composition can greatly improve the rendering efficiency. For example, transform is used to achieve the animation effect, which directly performs the composite animation operation on the non-main thread without directly occupying the resources of the main thread, and avoids the two sub-stages of layout and drawing.

Browser optimization: Most browsers use a queuing mechanism to update the layout in batches. The browser will queue the changes, and it takes at least one browser refresh to clear the queue. Multiple rearrangements and redrawing can be turned into a backflow redrawing. Disadvantages: When obtaining layout information, the queue may have operations that affect the return values of these properties or methods, forcing the queue to empty if not, triggering reordering and redrawing to ensure that the correct values are returned; Including offset… , scroll… The client… , width, height, getComputedStyle (), getBoundingClientRect (), avoid to use.

How to reduce rearrangement, redraw? Function: eliminate the layout and drawing stage, so as to reduce the main and non-main process of rendering calculation operation, can speed up the page rendering display.

When writing JS code:

Avoid frequent manipulation styles Avoid frequent manipulation of the DOM Avoid frequent reading of properties that cause backflow/redraw Use absolute positioning for elements with complex animations to keep them out of the document streamCopy the code

When writing CSS code:

Use transform instead of top use visibility instead of display: None Avoid using table layouts change the class at the end of the DOM tree as much as possible avoid setting multiple inline styles, CSS selectors match from right to left, Avoid too many node hierarchies apply the animation effect to position: For absolute/fixed elements, control the animation speed by selecting requestAnimationFrame to avoid using CSS expressions to set frequently redrawn or rearranged nodes to layers CSS3 hardware acceleration (GPU acceleration), Using transform, opacity, and filters will not cause redrawing, but background-color will still cause redrawing.Copy the code

Conclusion:

Rearrangement is the process by which the browser retriggers the layout and updates the entire rendering process after updating the geometry of the elements. Redraw is a process in which the browser directly enters the layer drawing stage after modifying the drawing properties of an element, and then executes the subsequent rendering process. Rearrangement always leads to redrawing, but redrawing does not necessarily lead to rearrangement; Compositing is a process in which the rendering engine skips the layout and layer drawing stages and performs subsequent compositing operations after modifying a property that is neither laid out nor drawn. Reducing rearrangement and redrawing can optimize Web performance, which browsers do through queuing mechanisms.Copy the code