The process by which a browser renders a page

1. Process HTML tags and build DOM trees

The DOM tree describes the content of the document.<html>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. The more DOM nodes there are, the longer it takes to build the DOM tree.

2. Process CSS tags and build CSSOM trees

CSS bytes are converted into characters, which are then converted into tokens and nodes, and finally linked into a tree structure called the CSS Object Model (CSSOM) :

3. Merge DOM and CSSOM into a render tree

The DOM/CSSOM tree itself is not directly used for typography and rendering; browsers generate another tree: the Render treeThe render tree contains only visible content. The header (usually) does not contain any visible information and therefore is not included in the render tree. Student: If you have one on the elementdisplay: none;, itself and its descendants will not appear in the render tree.

The Render tree is the bridge between the layout engine and the rendering engine of the browser. It is the output of the layout engine and the input of the rendering engine. At this point, the Render tree already contains the content and location information of all visible elements on the web page. The layout engine will accurately calculate the location of elements on the web page according to the content and structure of the Render tree. At this point, we have everything ready to go into the layout

4. Layout according to render tree to calculate geometric information of each node

Determining the size and location of nodes for the first time is called layout. The subsequent recalculation of node size and location is called reflux.

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.

The final output of the layout is a “box model” : all relative measurements are converted into absolute pixels on the screen.

5. Draw each node 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. The browser needs to do this very quickly.

Drawing can decompose elements in a layout tree into multiple layers. Promoting content to a layer on the GPU (rather than the main thread on the CPU) improves drawing and redrawing performance.

Layers do improve performance, but they come at the expense of memory management and should not be overused as part of a Web performance optimization strategy.

6. The synthesis of

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.

CSS animation implementation

1.transform

Translate, scale, rotate, skew with TransFrom

Transform: scale(0.5) translate(50%,50%);

But do not write it separately :(separate will make the above scaling effect disappear, only the displacement)

transform: scale(0.5);
transform: translate(50%.50%);
Copy the code

2.transition

Transition: Indicates the delay of the attribute name duration

Transform is usually used with transition to animate the transition.

  • The transition property can be specified as a transition effect of one or more CSS properties separated by commas:transition: margin-right 4s, color 1s;
  • Use all to represent all attributes:transition: all 2s;
  • Transition means has: linear | ease | ease – in | ease – out | ease – in-out | cubic bezier – | step – start | | step – end steps
  • Not all attributes can transition

3.animation

Animation: Duration transition mode Delay Times Direction Fill mode Whether to suspend the animation name

The animation property is used to specify one or more groups of animations separated by commas.

  • Duration: 1s or 100ms
  • Transition: Same as transition
  • Times: 1, 2, 3, or infinite
  • Direction: revese | alternate | alternare – reverse
  • Filling pattern: none | recently | background | to both
  • Whether to suspend: pasued | running

Examples are as follows:

#heart{
  margin: 100px;
  position: relative;
  display: inline-block;
  animation: heart 1.3 s infinite alternate;
}

@keyframes heart{
  0%{
    transform: scale(1.0);
  }
  100%{
    transform: scale(1.6); }}Copy the code

Q: After using animation, the animation will return to the origin. How do I stop the animation at the last frame?

A: Add a forward

#demo.start{
  animation: xxx 1.5 s forwards;  /* The last frame of animation will not go back to the original point after you get forwards */
}
Copy the code
The key frame @ keyframes

Control intermediate steps in a CSS animation sequence by defining the style of keyframes in the animation sequence. It can be written in two ways:

1. from to

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

From is equal to 0%. To is the same thing as 100%.

2. Percentage form

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

In the example, the top attribute appears in 0%, 30%, and 100% of keyframes, respectively, while the left attribute appears in 0%, 68%, 72%, and 100% of keyframes, respectively.

This article reference excerpts: 1, rendering page: the working principle of the browser 2, rendering tree construction, layout and rendering 3, browser rendering process 4, browser rendering: process and principle 5, @keyframes