How browsers render

After the user enters the URL in the browser address bar and completes the navigation process, the browser process hands the data to the renderer process. The rendering process has the following steps:

  1. The first step is to process the HTML tags and construct the DOM tree. HTML tags include start and end tags, as well as attribute names and values. The DOM tree describes the content of the document. The element is the first tag and the root of the document tree. Trees reflect the relationships and hierarchies between different tags. Tags nested within other tags are child nodes.
  2. The second step is to process the CSS and build the CSSOM tree. Browsers translate CSS rules into style maps that you can understand and use. The browser iterates through each rule set in the CSS, creating a tree of nodes with parent, child, and sibling relationships based on the CSS selector. As with HTML, browsers need to convert the CSS rules they receive into something they can use.
  3. The third step is to combine the DOM and CSSOM into a Render tree. The computed style tree or Render tree is built from the root of the DOM tree, traversing each visible node. The Render tree holds all visible nodes with content and calculation styles — matches all relevant styles to each visible node in the DOM tree, and determines the calculation style of each node based on CSS cascading.
  4. The fourth step is to run the layout on the render tree to calculate the geometry of each node. Layout is the process of determining the width, height, and position of all nodes in the rendering tree, as well as the size and position of each object on the page. Backflow is the determination of any subsequent size and location of any part of a page or the entire document.
  5. The final step is to draw the individual nodes to the screen. Painting involves drawing every visible part of an element onto the screen, including text, colors, borders, shadows, and alternate elements such as buttons and images.
  6. When parts of a document are drawn in different layers, overlapping each other, compositing must be done to ensure that they are drawn to the screen in the correct order and the content is displayed correctly.

Two ways to animate CSS: Transition and Animation

  1. You can define different transition effects for an element as it switches between different states.

The transition of grammar: The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay. You can separate two different attributes with a comma, and you can use all to represent all attributes. Transition modes include Linear, ease, ease-in, ease-out, etc. But not all attributes can transition.

  1. CSS animations make it possible to transition from one CSS style configuration to another. Animation consists of two parts: the style rules that describe the animation and the keyframes that specify the start, end, and midpoint styles of the animation. To create an animation sequence, you need to use the Animation property or its children. This property allows you to configure the animation time, length, and other animation details, but it does not configure the actual performance of the animation, which is implemented by the @Keyframes rule. This is done by creating two or more keyframes using @keyFrames. Each keyframe describes how the animation element should be rendered at a given point in time.

The child properties of the animation are:

  • Animation-delay: Sets the delay between the time the element is loaded and the time the animation sequence starts.
  • Animation-direction: Sets whether the animation will run in reverse or start again after each run.
  • Animation-duration: sets the duration of an animation cycle.
  • Animation-rotund-count: Sets the number of iterations of the animation. You can specify infinite to repeat the animation.
  • Animation-name: specifies the name of the keyframe described by @keyframes.
  • Animation-play-state: allows animation to be paused and resumed.
  • Animation-timing-function: sets the animation speed, that is, sets how the animation changes between key frames by creating an acceleration curve.
  • Animation-fill-mode: specifies how to apply styles to target elements before and after animation execution.

Because the animation’s timing is defined using CSS styles, keyframes use percentage to specify when the animation takes place. 0% represents the first moment of the animation and 100% represents the final moment of the animation. Because these two points in time are so important, they have special nicknames: from and to. Both are optional, and if from/0% or to/100% is not specified, the browser starts or ends the animation with calculated values. Additional optional keyframes may also be included that describe the state between the beginning and end of the animation.

tips

The learning of CSS should be consolidated through a lot of application and practice, and the best way to learn is to experiment when you don’t understand something.