I. Browser rendering principle

  1. Building an HTML tree (DOM) from HTML
  2. Building a CSS Tree from CSS (CSSOM)
  3. Combine two trees into one render tree
  4. The document flow box model calculates size and location
  5. Paint (to draw border colors, text colors, shadows, etc.)
  6. Compose (display screen according to cascade relationship)

Three update modes

  1. JS/CSS –> Styles –> Layout –> Draw –> Composition
  2. JS/CSS –> Styles –> Draw –> Composition
  3. JS/CSS –> Styles –> Composition

Pay attention to

  • It takes a little experimentation to figure out which properties will omit which steps

Two, the two ways of CSS animation

  • Use transtion transitions
Heart: hover {transform: scale (2.5); transition:all 2s; }Copy the code
  • Using animation transitions
#demo.start{ animation:xxx 15s; } @keyframes xxx{ 0%{ transform:none; 66.66%} {the transform: translateX (200 px); } 100%{ transform:translateX(200px) translateY(100px); // Need to remember the last position}}Copy the code

Note:

  • Not all attributes can transition
  • Display: None => Block cannot transition
  • Visibility :hidden => visible
  • Display: None is completely gone, not occupying the document stream; Visibility: Hidden is a visual disappearance or placeholder