This article has participated in the third “topic writing” track of the Denver Creators Training Camp. For details, check out: Digg Project | Creators Training Camp third is ongoing, “write” to make a personal impact.
preface
Eat enough to write code
Are you supposed to figure this out on your own? Borrow from How Work. Make a record of what I understand
I. Browser
Everyone is familiar with browsers, like Internet Explorer, Chrome, Firefox and so on. One of the most common functions for non-developers is to type a url into the browser’s address bar, wait for the page to show up, and then browse and search… That’s all I had to do with the browser before as I learned about the front end and started debugging on the browser, but I still didn’t know much about the process of rendering the browser page. I have read relevant documents these days and learned as follows:
- Browser features:
The main function is to request resources from the server and display them in the browser window. The resource format is usually HTML, but there are also PDF, images, and so on. The location of a resource is specified by the user using a URI (Uniform Resource Identifier).
- Common user interface elements in browsers:
- The address bar for entering a URL
- Forward and back buttons
- Bookmark option
- Refresh and stop buttons (used to refresh and stop loading the current document)
- Home button (to access the home page)
- The main components of the browser
- The user interface
- Browser engine
- Rendering engine
- network
- The UI backend
- JavaScript interpreter
- Data is stored
Ii. Rendering engine
The rendering engine first gets the contents of the requested document over the network, and then:
Graph TD parses HTML to build the DOM tree --> build the Render tree --> layout the Render tree --> draw the Render tree2.1 Take a look at DOM:
<html>
<head>
<tittle>Google</tittle>
</head>
<body>
<div>
<p>
Hello DOM
</p>
</div>
</body>
</html>
Copy the code- Corresponding DOM tree:
graph TD
html --> head --> tittle --> text1
html --> body --> div --> p --> text2
The contents of an HTML document are nodes, which have hierarchical relationships such as parent-child relationships and sibling relationships. The most common types of nodes are: document node, element node, text node, attribute node, comment node, etc.
- Process for building a DOM tree:
The process boils down to reading an HTML document, converting bytes into characters, identifying tokens(tags), converting tokens into nodes, and using those nodes to build a DOM tree.
graph TD
Bytes --> Characters --> Tokens --> Nodes --> DOM
2.2 What is a CSSOM tree
Similar to tag nodes in HTML files, nodes in CSS have hierarchical relationships and are connected to each other in the same logic to form the CSSOM tree.
body{
font-size:20px;
}
p{
font-weight:bold;
}
span{
color:yellow;
}
p span{
display:none;
}
img{
float:left;
}
Copy the code- Corresponding CSSOM tree:
graph TD
body --> p --> span1
body --> span2
body --> imgnengg
- The process for building a CSSOM tree:
It is the same as the DOM tree construction process, which is to read CSS documents, convert bytes into characters, identify tokens, convert tokens into nodes, and build CSSOM trees.
graph TD
Characters --> Tokens --> Nodes --> CSSOM
When a node is generated in the CSSOM tree, the style of the parent node is first inherited, then overridden, more specific styles are applied to the node, and finally the CSSOM tree is generated recursively.
2.3 with JavaScript
If a SCRIPT tag is encountered while building a DOM tree, the HTML parser blocks, passing it on to the JavaScript engine, and then the browser continues building the DOM tree. The root cause is this: Javascript manipulates DOM nodes, and the browser has no way of predicting what the DOM will look like next. To save resources and avoid invalid manipulation, it blocks the DOM tree construction first. So we can see that our predecessors would put JS files at the bottom of the HTML when writing code, because loading JS files in the HTML header would delay the presentation of the page due to JS blocking. So it’s at the end to speed up the page rendering.
2.4 Build the render tree
The render tree is the Render tree, which is combined by THE DOM tree and the CSSOM tree. There is no order in this order. Sometimes there will be parallel construction, and there will be the phenomenon of rendering while loading and parsing. The tree is a visual representation of the document, with visual elements arranged in the order they are displayed so that the content can be drawn in the correct order. The concrete display is often referred to as the concept of box model, which itself contains some geometric properties, such as width, height, position, and so on, as well as how to display an important property.
2.5 Layout Drawing
After the render tree is constructed, there is no location and size information. To determine this information, we call it layout. HTML has a streaming layout, which is top to bottom, left to right. The browser lays out each Render node in the Render tree, calculates the size and position of each element, and determines its position on the screen. Finally, the actual pixels are displayed on the screen by walking through the Render tree.