How browsers render

steps

  • Building an HTMl tree (DOM) from HTMl
  • Building a CSS Tree from CSS (CSSOM)
  • Combine two trees into one render tree
  • Document flow. Box model. Calculate size and position)
  • Paint the border color. Text color, shadow, etc.)
  • Compose (display screen according to cascade relationship)

How to update styles

We usually use JS to update styles

  • For example: div. Style. Background = ‘red’
  • div.style.display=’name’
  • div.classList.add(‘red’)
  • Div.remove () simply deletes the node
CSS (what process does each property trigger need to try one by oneImportant sites(csstriggers.com)

JS three ways to update styles

  • (Going all div.remove will trigger the current disappearance of other elements relatyout)Javascript > Style > Layout > Paint > Composite (JS/Css > Style > Layout > Paint > Composite)
  • Skip Layout to change the background color. Direct repaint + Composite)Javascript > Style > Paint > Composite (JS/Css)
  • (Skip Layout +paint to transform, just COmposite)Javascript > style > Composite (JS/Css > Style > Composite)Note that the effect must be viewed in full screen, there are problems in iframe

Two ways to animate Css: Transition and Animation

The transition (transition)

Function:Complete intermediate frames

grammar

  • Transition: Indicates the delay of the attribute name duration
  • Transition: Left 200ms Linear
  • You can separate two different attributes with commas
  • Transition: Left 200ms, top 400ms
  • You can use all to represent all attributes
  • The transition: all 200 ms
  • The transition is linear. Linear) /ease /ease-in/ease-in-out/cubic-bezier /step-start /step-end /steps.

Note: Not all attributes need to be transitioned

  • Display: None => Block cannot transition
  • Risibility :hidden=>visible (no reason)
  • Background colors can transition
  • Can it be transitioned? (It’s not recommended that I take up positions even though I can’t see)
  • Transitions must start with one animation or two transitions such as hover and non-hover states.

animation

role

  • Duration: 1s or 1000ms

  • Transition mode: The value is the same as transition. Such as linear

  • Number of times: 3 or 2.4 or infinite

  • Direction: rererse/alterate/alternate – vererse

  • Filling pattern: none/forwords/backuards/to both

  • Pause: psused/running

  • All of the above properties have separate properties to deal with