Complete high-frequency question bank warehouse address: github.com/hzfe/awesom…

IO /awesome-int hzfe.github.

Issues related to

  • How to improve page rendering performance
  • How to reduce page rearrangement and redrawing
  • What actions cause rearrangement/redrawing

Answer key points

Layout Paint

Browser rendering is roughly divided into four stages, with Layout and Paint following the parsing of THE HTML. Changes in styles or nodes, as well as access to layout information, can lead to rearrangements and redraws. The rearrangement and redrawing process takes place in the main thread, which means that improper rearrangement and redrawing can lead to performance issues such as rendering lag and user interaction lag.

Knowledge depth

1. What is rearrange redraw

Layout = Layout

The process by which the browser calculates the geometry of elements and determines their size and location on the page.

Paint (Paint/Rasterize)

Refers to the process of converting each node in the render tree into an actual pixel on the screen.

From retrieving documents, styles, scripts, etc., to rendering the final results to the screen, the browser goes through the steps shown in the figure below. Changes to the DOM or CSSOM cause the browser to repeat the steps in the diagram. Rearrange and redraw essentially retrigger Layout and Paint, respectively, and rearrange inevitably leads to redraw.

Common operations that cause rearrangement/redrawing

  1. Changes in appearance will result in repainting. Related style properties such as color opacity, etc.

  2. Changes in layout structure or node content can result in rearrangement. Associated style properties such as height float position.

  • Box size and type.
  • Positioning scheme (normal flow, floating and absolute positioning).
  • Relationships between elements in a document tree.
  • External information (viewport size, etc.).
  1. Results when obtaining layout informationrearrangement. The associated method properties are as followsoffsetTop getComputedStyleAnd so on.

2. How to reduce rearrangement and redrawing

meaning

Most monitors refresh at 60FPS (frames per second). Ideally, the browser needs to complete the render phase and deliver a frame in 1/60 of a second. This gives the user an interactive page.

During the interaction phase, page updates (typically triggered by executing JavaScript) usually trigger reordering and redrawing. To improve browser rendering efficiency, minimize redrawing and reordering, reduce browser rendering time, and render content to the screen as quickly as possible.

The solution

  1. Bulk writes and reads to the DOM (via the virtual DOM or DocumentFragment).
  2. Avoid frequent manipulation of styles. Understand how common style attributes trigger Layout/Paint/Composite, and use styles wisely.
  3. Make good use of special style attributes (such as Transform: translateZ(0) or will-change), upgrade the rendering layer to a composite layer, and enable GPU acceleration to improve page performance.
  4. Cache layout information on demand to avoid frequent reads.

In addition, you can use the DevTools Performance panel to see how the main thread is occupied by the rearranged redraw task and the calling code.

The resources

  1. Render tree construction, layout, and drawing
  2. Avoid large, complex layouts and layout jitter
  3. CSS properties trigger data that is laid out, drawn, and synthesized
  4. What forces layout / reflow