Browser rendering process

  • steps
  1. Building an HTML tree (DOM) from HTML
  2. Building a CSS Tree from CSS (CSSOM)
  3. Create render tree by merging two trees
  4. Layout (document flow, box model, calculated size and location)
  5. Paint (to draw border colors, text colors, shadows, etc.)
  6. Compose (display screen according to cascade relationship)
  • The three trees

  • Update the way

CSS Animation optimization

  • JS optimization

Use requestAnimationFrame instead of setTimeout or setLnterval

  • CSS optimization

Use will-change or translate

transform

Four common functions

  • Translate displacement
  • Scale zooming
  • The rotate rotating
  • Skew tilt

The transition transition

Effect: Replenishes intermediate frames

Syntax: Transition: Attribute name Duration Delay of the transition mode

animation

Animation: Duration transition mode Delay Times Direction Fill Mode Whether to pause the animation name

@ keyframes grammar

@keyframes xxx{ from{ transform:translateX(0%); } to{ transform:translateX(100%); } } @keyframes xxx{ 0%{top:0; left:0; } 100%{top:100px; left:100%} }Copy the code