First, browser rendering principle

Browser rendering process

steps

1. Build an HTML tree (DOM) from HTML — describing the content
2. Build a CSS Tree from CSS (CSSOM) – describes the style rules that need to be applied
3. Combine the two trees into a single render tree that contains only the nodes needed to render a web page
4. Layout (document flow, box model, calculation of exact position and size of each object) — All relative measurements are converted to absolute pixels on the screen
5. Paint (draw border colors, text colors, shadows, etc.) — Renders pixels onto the screen
6. Composite (display the picture according to the cascading relationship)

Three tree images

Building a Render tree

1. Each is traversed from the root of the DOM treevisibleNode.
   • Some nodes are not visible (script tags, meta tags, etc.) because they do not show up in the render output.
   • Some nodes are hidden by CSS, so these hidden nodes are ignored by the rendering tree.
2. For each visible node, find the appropriate CSSOM rule and apply it.
3. Emit visible nodes, including their contents and computed styles.

(Notice the difference between visibility: hidden and display: None: the former hides an element that still occupies the layout space but is rendered as an empty box; The latter removes elements completely from the render tree, so they are no longer part of the layout.

How to update styles

1. JS is generally used to update styles
2. There are three different rendering methods
   • JS/CSS > Styles > Layout > Draw > Composition

   

   • JS/CSS > Styles > Draw > Composition

   

   • JS/CSS > Styles > Composition

   

CSS trigger Queries which version will be triggered by changing CSS properties

Second, CSS animation

transform

Four common functions

1. The displacementtranslate
   • translateX(<length-percentage>)
   • translateY(<length-percentage>)
   • translate(<length-percentage>,<length-percentage>?)
   • translateZ(<length>)And the parent containerperspective
   • translate3d(x,y,z)

The center of an absolutely positioned element:

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
Copy the code

2. The zoom scale

   • scaleX(<number>)
   • scaleY(<number>)
   • scale(<number>,<number>?)
   • Use less, easy to appear blurred

3. Rotate the rotate

   • rotate([<angle> | <zero>])
   • rotateZ([<angle> | <zero>])
   • rotateX([<angle> | <zero>])
   • rotateY([<angle> | <zero>])
   • rotate3d
   • Generally used for 360 degree rotation loading

4. Tilt skew

   • skewX([<angle> | <zero>])
   • skewY([<angle> | <zero>])
   • skew([<angle> | <zero>], [<angle> | <zero>]?)

5. Use a combination of

   • Translate the transform: scale (0.5) (100%, 100%);
   • transform: none;Cancel all

experience

• It usually requires coordinationtransitionThe transition
• Inline elements are not supportedtransform, needs to become a block first

transitionThe transition

role

• Supplementary intermediate frame

grammar

• Transition: Indicates the delay of the attribute name duration
• transition: left 200ms linear
• You can separate two different attributes with commastransition: left 200ms, top 400ms
• You can use all to represent all attributestransition: all 200ms
• Transition means has: linear | ease | ease – in | ease – out | ease – in-out | cubic bezier – | step – start | | step – end steps
• Not all attributes can transition
  • display: none => blockCan’t transfer
  • General tovisibility: hidden => visible

Transitions must have a start, usually only one animation or two, such as hover and non-hover state transitions

If I have an intermediate point

1. Use twicetransform
   • .a === transform ===> .b
   • .b === transform ===> .c
   • How to determine the intermediate point: use setTimeout or listen for the transitionEnd event
2. useanimation
   • Declare keyframes
   • Add animation

animation

@keyframes Complete syntax

1. One is from to (there is no way to set the middle point)
2. One is percentages

@keyframes slidein {
  from {
      transform: translateX(0%);
  }
  to {
      transform: translateX(100%); }}Copy the code

@keyframes identifier {
    0% {top: 0; left:0; }30% {top: 50px; }68%.72% {left: 50px; }100% {top: 100px; left: 100%;}
}
Copy the code

How to get animation to stop at the last frame: forward

#demo.start{
  animation: xxx 1.5 s forwards;
}

@keyframes xxx {
  0% {
    transform: none;
  }
  66.66%{
    transform: translateX(200px);
  }
  100%{
    transform: translateX(200px) translateY(100px); }}Copy the code

animationAbbreviation of grammar

Animation: | | transition way long delay | | | times direction whether filling | | suspended animation;

• Length: s or ms
• Transition mode: the same as transition, such as Linear
• Number: 3 or 2.4 or infinite
• Direction: reverse | alternate | alternate – reverse
• Filling pattern: none | recently | backwards | to both
• Whether to suspend: paused | running
• All of the above attributes have corresponding individual attributes, query MDN

---

Refer to the article

Render tree construction, layout, and drawing

Rendering performance

Use transform to animate