How browsers render
Building an object Model
The DOM and CSSOM trees need to be built before the browser renders the page. Therefore, we need to make sure that both HTML and CSS are available to the browser as soon as possible. TL; DR bytes → characters → tokens → nodes → object model. HTML tags are converted to the document Object Model (DOM); CSS tags are converted into a CSS object model (CSSOM). DOM and CSSOM are separate data structures. Chrome DevTools Timeline allows us to capture and examine the build and processing overhead of DOM and CSSOM.
Render tree construction, layout, and drawing
The CSSOM tree and DOM tree are combined into a render tree, which is then used to compute the layout of each visible element and output to the rendering process to render the pixels onto the screen. Optimizing each of these steps is critical for optimal rendering performance. In the previous section on building an object model, we built a DOM tree and a CSSOM tree from HTML and CSS inputs. However, they are separate objects that capture information about different aspects of the document: one describes the content, the other describes the style rules that need to be applied to the document. How do we merge the two so that the browser renders pixels on the screen? TL; The DR DOM tree is merged with the CSSOM tree to form the rendering tree. The render tree contains only the nodes needed to render a web page. The layout calculates the exact position and size of each object. The final step is rendering, using the final render tree to render the pixels onto the screen. Here's a brief overview of what the browser does: process HTML tags and build a DOM tree. Process CSS tags and build CSSOM trees. Merge DOM and CSSOM into a render tree. Layout according to render tree to calculate geometric information for each node. Draw the individual nodes to the screen.
Summary of browser rendering process
CSS book CSSOM √ Combine DOM and CSSOM into a single render tree √ Layout (document flow, box model, calculation size and location) √ √ Compose Compose (display the screen based on a cascading relationship)
Reference source
Rendering performance
Render tree construction, layout, and drawing
Stick to synthesizer attributes and management counts only
CSS Triggers
Two ways to animate CSS: Transition and Animation
Case 1:
demo.html
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="heart">
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div>
</div>
</body>
</html>
Copy the codedemo.css
* {box-sizing: border-box; }#heart{
display: inline-block;
margin: 100px;
position: relative;
/* Transition duration is 1 second */
transition: all 1s;
}
/* Trigger */ when the mouse is over
#heart:hover{
/* Deform: zoom 1.2 times */
transform: scale(1.2);
}
#heart>.left{
background: red;
width: 50px;
height: 50px;
position: absolute;
/* Deformation: rotate (45°) in X-axis displacement (31 pixels) */
transform: rotate(45deg) translateX(31px);
bottom: 50px;
left: -50px;
/* Top left, right, top right, bottom left, bottom left */
border-radius: 50% 0 0 50%;
}
#heart>.right{
background: red;
width: 50px;
height: 50px;
position: absolute;
/* Deformation: rotate (45°) in Y axis displacement (31 pixels) */
transform: rotate(45deg) translateY(31px);
bottom: 50px;
right: -50px;
/* Top left, right, top right, bottom left, bottom left */
border-radius: 50% 50% 0 0;
}
#heart>.bottom{
background: red;
width: 50px;
height: 50px;
/* Deform rotation 45° */
transform: rotate(45deg);
}
Copy the code
Case 2:
demo.html
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="heart">
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div>
</div>
</body>
</html>
Copy the codedemo.css
* {
box-sizing: boder-box;
}
#heart {
/* wrap the div inside, there is a pit, pay attention to */
display: inline-block;
margin: 100px;
width: 50px;
height: 50px;
position: relative;
/* Animation.5s (lasts 0.5 seconds) infinite alternate-reverse */
animation:.5s heart infinite alternate-reverse;
}
@keyframes heart {
0% {
/* Deform zoom 1 times */
transform: scale(1);
}
100% {
/* Deform zoom 1.2 times */
transform: scale(1.2)}}.left {
width: 50px;
height: 50px;
background: red;
position: absolute;
left: -25px;
top: -25px;
/* Deform 45° to shift 5 pixels along the X axis */
transform: rotate(45deg) translateX(-5px);
border-radius: 50% 0% 0% 50%;
}
.right {
width: 50px;
height: 50px;
background: red;
position: absolute;
right: -25px;
top: -25px;
/* Deform 45° to shift 5 pixels along the Y axis */
transform: rotate(45deg) translateY(-5px);
border-radius: 50% 50% 0% 0%;
}
.bottom {
width: 50px;
height: 50px;
background: red;
/* Write relative position, otherwise will happen strange things, how to explain? * /
/* Add a width and height of 50px to #heart */
position: absolute;
transform: rotate(45deg);
}
Copy the code
Online case