Hi, I’m Hui Ye and I’m so cute. The story begins with a classic interview question: What happens from the time you enter the URL to the time the page loads? I believe you should be familiar with this topic. This series is my “article to understand JS series” after the second series. Designed to make you understand the loading process, simple answers and in-depth answers can be fluent!

preface

Hi, I’m Hui Ye and I’m so cute.

After a three-way handshake, a TCP connection, and an HTTP request to obtain network resources, you get the HTML file first. HTML is the basis of a page, so you download it at the beginning, and then you parse it. After parsing, the rendering engine takes on the task of converting static resources into visual interfaces.

Main Rendering process

There are five main rendering processes:

In each of these five processes, there are corresponding products

1. Build a DOM tree

The HTML document is parsed from top to bottom, and in the process of parsing THE HTML, various external resource requests are made for page rendering.

(In fact, this step, the external resource request is far from that simple, about the external chain CSS, JS blocking problem, you can see this article on CSS blocking and JS blocking).

The DOM tree is generated at this stage.

2. Build the CSSOM tree

Parses all CSS style information.

The CSSOM tree is generated at this stage.

3. Synthesize the Render tree

Combine the DOM tree and CSSOM tree generated above to generate the Render tree. (Pseudo-elements like :before and :after are built into the DOM tree at this point.)

The Render tree is generated at this stage.

Layout of 4.

The relative positions and sizes of all elements are calculated in this step.

In this phase, the layout box model is generated.

5. Apply colours to a drawing

According to the above layout product box model, call THE GPU to draw, synthesize the layer, and display it on the screen.

In this phase, the target interface is generated.

Take a chestnut

<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width =device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
  <title>The page title</title>
  <style>
    body{
      font-size: 36px;
    }
    .main-box{
      width: 200px;
      height: 50px;
      border: 2px solid green;
    }
    span{
      font-size: 24px;
    }
    p{
      color: rosybrown;
      font-size: 18px;
    }
  </style>
</head>

<body>
  <div class="main-box">
    <span class="title">Bright night is so cute</span>
  </div>
  <p>Illustrate the browser rendering process</p>
</body>
</html>
Copy the code

1. The DOM tree

2. CSSOM tree

Since CSS has concepts of inheritance and precedence, there is a concept of style overwriting.

Therefore, the CSSOM tree needs to wait until it is fully built before it can be used

3. The Render tree

Display: none; Will not appear in the Render tree.

4. Layout box model

Since

sets the width and height,

is a block-level element that occupies a single line.

5. Target interface