Writing in the front

  • Optimization is a big topic that could fill a book. This article only discusses the optimization of front-end animation.
  • This article is more conceptual (reflow, repaint), understanding the concept is a prerequisite. Among them, rearrangement and redrawing are two important concepts (because they are an important cause of the lag, among which the cost of rearrangement is much higher).

rearrangement

  • Concept: Reflow, when we animate an element, the browser needs to check every frame to see if any elements are affected and adjust their size and position, usually in conjunction with each other, we call it reflow.
  • Related attributes that trigger rearrangement:
    • Box model attributes trigger relayouts
      • width
      • height
      • padding
      • margin
      • display
      • border-width
      • border
      • min-height
    • Location properties and floats also trigger relayouts
      • top
      • bottom
      • left
      • right
      • position
      • float
    • Changing the text structure inside a node also triggers a relayout
      • text-align
      • overflow-y
      • font-weight
      • overflow
      • font-family
      • line-height
      • vertival-align
      • white-space
      • font-size

redraw

  • Concept: Repaint. When an animation is executed, the browser listens for changes in the appearance of elements, usually visual elements such as background colors, shadows, and borders, and repaints them.
  • Related attributes that trigger redraw:
    • color
    • border-style
    • border-radius
    • visibility
    • text-decoration
    • background
    • background-image
    • background-position
    • background-repeat
    • background-size
    • outline-color
    • outline
    • outline-style
    • outline-width
    • box-shadow

How does the browser render the DOM

  • Take the DOM and split it into multiple layers
  • Recalculate style computes the style result for each layer node.
  • Generate graphics and positions for each node (Layout- Reflux and relayout)
  • Draw and fill each node into the layer bitmap (Paint Setup and Paint– Redraw)
  • The layer is uploaded to the GPU as a texture
  • Match multiple Layers to a page to generate the final screen image (Composite Layers)

Create a new render layer

When creating a new rendering layer and executing animation, only GPU is required to output in an independent rendering layer according to the existing bitmap and corresponding transformation, and then combine the output. This process does not require the main thread CPU, which is the core of optimization.

Creating a new render layer:

  • When an element is at the outermost layer of an HTML document (element)
  • When an element position is not initial and has a z-index value (not auto)
  • When an element is set to opacity, Transforms, filters, CSS-regions, paged media, etc.
  • (Of course there are other cases, see the reference links below.)

JS animation and CSS3 animation comparison

  • Js animation: The advantage is that we can start, pause and stop at any time. The disadvantage is that it can’t be optimized like CSS, because JS animation runs on the main thread, which is easy to get stuck and lose frames.
  • Css3 animation: The advantage is that the browser can optimize the animation. It creates layers if necessary and then runs outside the main thread. The downside is a lack of strong control.

conclusion

  • We should try to avoid using properties that trigger relayouts and redraws to avoid losing frames. It is best to declare the animation in advance so that the browser can optimize the animation in advance.
  • The best properties for animation are: opacity, translate, rotate, and scale, while avoiding left/padding/background-position.
  • If you need JS to animate, use requestAnimationFrame, or Velocity. Avoid jQuery animation,setTimeout,setInterval.
  • Use fixed or Absolute positions for animating elements whenever possible.
  • When using 3D hardware acceleration to improve animation performance, it is best to add a Z-index attribute to the element, artificial interference with the composite layer sorting, can effectively reduce chrome to create unnecessary composite layer, improve rendering performance, especially mobile optimization effect.
  • However, not all browsers will enable GPU rendering by default, so it is usually enforced with translate3D, translateZ, or opacity < 1.

Refer to the link