1. Browser rendering process:

  • Parsing the HTML generates a DOM tree.
  • Parsing CSS generates a CSSOM rule tree.
  • Combine THE DOM tree with the CSSOM rule tree to generate the render tree.
  • Traversing the rendering tree to start the Layout (Layout), each node of the rendering tree for Layout processing, determine its display position on the screen.
  • Paint each node of the render tree to the screen.
  • Compose, which displays pages based on cascading relationships.

2. Repaint:

  • Changing an element’s background color, text color, border color, and so on does not affect the attributes of its surrounding or internal layout, and a portion of the screen is redrawn, but the element’s geometry remains the same.
  • The browser also needs to merge the render layers and output them to the screen after each redraw, greatly reducing performance.
  • Using transform improves performance by eliminating the redraw step.

3. Transform: 2D or 3D transformations applied to elements. This property allows you to translate, scale, rotate, skew, etc. Here are his usual values:

  • Translate3d (x,y,z), translateX(x), translateY(y), translateZ(z), translate(x,y). The parameter x represents how far an element moves along the X-axis, and the parameter y represents how far an element moves along the Y-axis, in units such as px, em, and percentage.
  • Scale :scaleX(), scaleY(), scale(). The x parameter represents the scale of the element in the X-axis direction, and the y parameter represents the scale of the element in the Y-axis direction. When x or y is between 0 and 1, the element shrinks. When x or y is greater than 1, the element is magnified.
  • Rotate: rotate3D (x,y,z, Angle), rotateX(Angle), rotateY(Angle), rotateZ(Angle). It means that it rotates on that axis.
  • Skew: Skew (x-angle,y-angle) defines 2D skew conversion along the x and y axes. SkewX (Angle) defines 2D skew conversions along the X-axis. SkewY (Angle) defines 2D skew conversions along the Y-axis.

4. Animation. The following lists some common tags for properties

  • Animation-name: specifies the name of the keyframe to bind to the selector;
  • Animation-duration: Specifies how many seconds or milliseconds the animation takes to complete;
  • Animation-timing-function: sets how the animation will complete a cycle (Linear animation has the same speed from beginning to end; Ease animation starts at a low speed, speeds up, and slows down before ending.) ;
  • Animation-delay: Sets the delay interval before the animation starts.
  • Animation-rotund-count: Defines the number of times an animation can be played (infinite);
Animation: heart 1s infinite alternate; animation: heart 1s infinite alternate; } /* animation-name:heart */ @keyframes heart{0%{transform:scale(1.0); 100%} {the transform: scale (1.5); }}Copy the code

5. Transition:

  • Transition-property: specifies the name of the CSS property and the transition effect, such as width,height, and all.
  • Transition-duration: The transition effect takes a specified number of seconds or milliseconds to complete;
  • Transition-timing-function: specifies the transition speed curve.
  • Transition-delay: specifies the time at which the transition effect starts.