How to avoid redraw and reflow on the front end

Methods for the front-end to avoid redrawing and reflow: 1. Use transform instead of top/left; 2. Use visibility instead of display; 3. Avoid using table layout; 4. Avoid frequent manipulation of styles; 5. Use DocumentFragment; 6. Use virtual DOM; 7. Avoid reading layout information when the layout changes; 8. Use CSS3 animation; 9. Use flex layout; 10. Avoid using too many floats, etc.

# Operating system for this tutorial: Windows 10 system, Dell G3 computer.

In front-end development, redrawing and reflow are issues that need to be focused on in performance optimization. Redrawing and reflowing will cause page performance degradation and affect user experience. Here are some ways to avoid redrawing and reflowing:

1. Use transform instead of top/left: When changing the position of an element, avoid directly manipulating the top and left attributes, but use CSS transform attribute to implement displacement. The transform property does not trigger reflow, thus improving performance.

2. Use visibility instead of display: The display attribute will trigger reflow and redraw, while the visibility attribute will only trigger redraw and not reflow. Therefore, consider using the visibility attribute to hide elements instead of using display: none.

3. Avoid using table layout: table layout will trigger a lot of reflow and redraw, so try to avoid using table layout. You can use div css to replace the table layout.

4. Avoid frequent style manipulation: Frequent style manipulation will result in a large number of reflows and redraws. You can combine multiple style manipulations into one operation, or use CSS classes to modify styles in batches.

5. Use DocumentFragment: If you need to frequently operate DOM elements, you can add them to DocumentFragment first, and then insert them into the document uniformly. This reduces reflows and redraws.

6. Use virtual DOM: Virtual DOM can reduce unnecessary DOM operations, thereby reducing the number of reflows and redraws. You can use frameworks such as React, Vue, etc. to implement virtual DOM.

7. Avoid reading layout information when the layout changes: When the layout changes, if the layout information (such as offsetTop, offset, etc.) is read immediately, the browser will be forced to reflow. You can delay reading layout information by using requestAnimationFrame or setTimeout to avoid triggering reflow.

8. Use CSS3 animation: CSS3 animation can take advantage of hardware acceleration, which can improve the performance of animation. You can use the transform and opacity properties to achieve animation effects and avoid using the top and left properties.

9. Use flex layout: Compared with traditional layout methods, flex layout can realize page layout more efficiently and reduce reflow and redrawing.

10. Avoid using too many floats: Floats will cause surrounding elements to recalculate their positions and cause reflow. You can use CSS flex layout or use absolute positioning instead of floating.

To sum up, the key to avoid redrawing and reflowing is to reduce the number and scope of operations on the DOM, try to use appropriate CSS properties and layout methods, avoid frequent reading and writing of styles, and use them rationally Optimization techniques and tools. By following these principles, you can effectively improve the performance and user experience of your front-end pages.

The above is the detailed content of How to avoid redraw and reflow on the front end. For more information, please follow other related articles on the PHP Chinese website!