This is the sixth day of my participation in the August More Text Challenge. For details, see: August More Text Challenge;

preface

Before we can understand the browser rendering process, we need to understand the basic meaning of HTML, CSS, and JavaScript.

1.HTML is a hypertext Markup language. Its content consists of markup and text. The tags we use when writing HTML (such as div, P, and so on) are tags.

The browser renders the HTML content according to the tag semantics.

CSS is called cascading Style sheets. It’s made up of selectors and properties. CSS is needed when you need to change the color, width, and height of HTML.

When the browser rendering engine recognizes the CSS file, it changes the HTML content presentation style based on the attributes and tags.

3.JavaScript is JS for short. It can make our web content “move”. Not only can you change the CSS style, but you can also change the HTMl content.

With that in mind, let’s take a look at how browsers render.

The body of the

Look at a piece of code like this, and think, how does the browser parse it?

<html>
    <head>
        <title>The Denver nuggets<title>
        <style>
            .nick-name {
                font-size: 2em;
                color: pink;
            }
            .level {
                font-size: 1.5 em;
                color: blue;
            }
        </style>
    </head>
    <body>
        <div class="nick-name">Mango!</div>
        <div class="level">Lv2</div>
    </body>
</html>
Copy the code

1. Generate the DOM tree

The browser parses the HTML code from top to bottom, but the HTML language is not directly understood and used by the browser, so the browser needs to convert the HTML into a structure it can understand, namely a DOM tree (tree structure).

Based on the above code, the browser draws a DOM tree as shown in the following figure.

2. Style calculation

< span style = “box-sizing: border-box; color: RGB (74, 74, 74); line-height: 22px; font-size: 13px; white-space: inherit! Important;”

Similarly, CSS syntax is not directly understood and used by the browser, so when the browser’s rendering engine receives CSS text, it converts the CSS text into styleSheets that the browser can recognize.

Once you get your stylesheet, all you have to do is standardize it, which is to convert some of our simplified writing into something that the browser can accept. For example, color: Pink will be converted to Color: RGB (245, 195, 203). When these styles are calculated, they generate their own style tree.

3. Generate a layout tree

After standardization, you can calculate the specific style of each node in the DOM tree and combine the DOM tree and CSS tree into a new layout tree. At the same time, the layout calculation is performed to calculate the exact position of each DOM, and when it is complete, it is rendered onto the page.

summary

In this section, we make sure that each node has its own style and layout information, and then share how the layout tree is drawn after the browser has generated it. Interested partners can continue to pay attention to the follow-up ~

How the browser renders HTML, CSS, and JavaScript (part 2) has also been updated. If you are interested, you can click the link directly to view it.

The front is a long distance, we are all on the road, hope to communicate with friends, progress together. Keep updating ing…..