First, browser rendering principle

1. The browser rendering process mainly includes the following five steps

  • The browser parses the retrieved HTML document into a DOM tree.

  • The CSS markup is processed to form the cascading style sheet Model CSSOM(CSS Object Model).

  • Combine DOM and CSSOM into a rendering tree, representing a set of rendering objects.

  • Each element of the render tree contains a calculated content, called a layout layout. The browser uses a streaming approach where all elements are laid out in a single pass draw operation.

  • Drawing the nodes of the render tree onto the screen is called painting.

2. The specific process is shown in the figure below

3, apply colours to a drawing

Web page generation, will render time, at least in the process of user access, also will continue to render, to render before need to repeat step 4 (to regenerate the layout) + step 5 (redraw) or only the fifth step (redraw) in constructing CSSOM tree, clog rendering, until CSSOM tree is built. The more specific the CSS selector is, the slower the execution speed will be. When the HTML is parsed to script tags, DOM construction will be paused, and after completion, it will restart from where it was paused. That is, if you want the first screen to render as fast as possible, the less you should load JS files on the first screen. CSS also affects THE execution of JS, which is executed only after the stylesheet has been parsed, so it is safe to assume that CSS will also pause DOM building in this case

Second, CSS animation

CSS animations can be done in two ways: Transition and animation, which are new properties in CSS3

1. Transition

The transform property applies 2D or 3D transformations to elements. This property allows you to rotate, scale, move, or tilt elements

(1)2D position movement

  • Translate (x,y): based on the original position, translate along the x axis with length x, and translate along the y axis with length y

The transform: translate (x, y);

  • TranslateX (x): Based on the original position, translateX along the X-axis, length x

The transform: translateX (x);

  • TranslateY (y): Based on the original position, translateY along the Y-axis with length y

The transform: translateY (y);

(2)3D position movement

  • Translate3d (x,y,z): Based on the original position, translate3D along the x axis with length x, translate3D along the y axis with length Y, translate3D along the Z axis with length Z

The transform: translate3d (x, y, z);

  • TranslateZ (z): Based on the original position, translateZ along the Z-axis with length z

The transform: translateZ (z);

(3)2D zoom conversion

  • Scale (x,y): Scale transformation based on the original position, where X represents the scaling multiple along the x axis and y represents the scaling multiple along the y axis

The transform: scale (x, y);

  • ScaleX (x): Scaling based on the original position, where X represents the scaling multiple along the x axis

The transform: scale (x);

  • ScaleY (y): Scaling based on the original position, where Y represents the scaling multiple along the Y-axis

The transform: scale (y);

(4)3D zoom conversion

  • Scale3d (x, y, z) : scaling transformation based on the original location, where x represents expansion ratio along the x axis, y represent along the Y-axis scaling ratio, z represents expansion ratio along the z axis

The transform: scale3d (x, y, z);

  • ScaleZ (z): Scaling based on the original position, where Z represents the scaling multiple along the Z-axis

The transform: scaleZ (z);

(5) 2 d rotation

  • Rotate (Angle): The center of a graph is the rotate center and the Angle is clockwise

The transform: the rotate (Angle);

  • RotateX (x): Rotates around the X-axis at an Angle of Angle clockwise

The transform: rotateX (x);

  • RotateZ (z): rotates around the Y axis at the Angle of Angle clockwise

The transform: rotateZ (z);

(6) 3 d rotation

  • Rotate3d (x,y,z, Angle): Rotate the x,y, and z directions at the same time, and rotate the Angle clockwise with Angle

The transform: the rotate3d (x, y, z, Angle);

  • RotateZ (z): Rotates around the z-axis at an Angle of Angle clockwise

The transform: rotateZ (z);

2. Animation composition

(1) keyframes (@keyframes)

Keyframes – Defines the state of the animation at different stages.

Animation properties – Determines how long the animation should be played, how many times it should be played, and which functions should be used to play the animation, etc. (Like audio and video players)

CSS properties – Is the state of a CSS element under different keyframes.

(2) Animation properties

  • Animation-timing-function: the playback speed curve of an animation.

Optional configuration parameters are: ease, ease-in, ease-out, ease-in-out, Linear, cubic-bezier(number, number, number, number)

  • Animation-direction: indicates whether the CSS animation is played backwards.

The optional configuration parameters for: single – animation – direction = normal | reverse | alternate | alternate – reverse

Animation-direction: normal playback animation-direction: reverse Playback animation-direction: normal playback animation-direction: reverse playback animation-direction: Alternate animation-direction: alternate-reverse Alternate animation-direction: normal, reverse animation-direction: alternate, reverse, normal

  • Animation-delay: Defines when the animation starts to play. That is, the length of time between the time the animation is applied to the element and the beginning of the animation.

The default value is 0s, indicating that the animation starts immediately after it is started on the element. The value is in seconds (s) or milliseconds (ms).

  • Animation-rotund-count: Defines the number of times our animation is played. The number of cycles can be 1 or infinite.

The default value is played only once.

single-animation-iteration-count = infinite | number

  • Animation-fill mode

Animation-fill-mode refers to the style applied to an element before and after a given animation is played.

single-animation-fill-mode = **none **| **forwards **| **backwards **| both

Animation-fill-mode: None None of the styles are changed before and after the animation is executed

Animation-fence-mode: forwards the style for the last frame of the target animation

Animation-fill-mode: backwards retains the style of the first frame of the target animation

Animation-fel-mode: Both animations will perform forwards and backwards movements.

  • Animation-timing-function: defines whether the animation is running or paused. You can be sure to query it to determine if the animation is running. The default value is running

single-animation-timing-function = running | paused

The running animation plays normally

Paused animation