Web page performance criteria, JS animation, CSS animation need to pay attention to what

RAIL helps us determine which pages are silky, and developer tools allow us to capture performance data more accurately.

JS animation should ensure that 6ms time is reserved for the browser to process the pixel pipeline, and its execution time should be less than 10ms to ensure that the overall running speed is less than 16ms. However, the timing of the animation is also important, timers cannot reliably trigger the animation, so we need to use requestAnimationFrame to trigger the JS animation. At the same time, we should avoid all FSL, which has a significant impact on performance.

CSS animations can be done by lowering the drawing area and using the Transform property. We also need to manage layers well. Since drawing and layer management are both expensive, we often need to make trade-offs and make the best choice for each situation.

Reference article: Make your pages silky

Reduce backflow and redraw

  1. Instead of changing the DOM style line by line, define the CSS class in advance and change the DOM className
  2. Do not place DOM node attribute values in a loop as variables in the loop
  3. Use fixed or Absolue position for animated HTML elements so that modifying their CSS will not backflow
  4. Do not use a table layout, because a small change may cause the table to be rearranged

A detailed discussion of composite layers