preface

The browser is in the front, just like the plate is in the cook. No matter how good the cooking technology is, it needs to be put out and tasted before it can be known whether it is real or not.

So, with a good browser, master the principle of the browser, is every front-end development of a required course. Recently, just in learning geek time “browser principle”, after all, such good information, read the precipitation of course, so, there is this article.

A, an overview of

Browser architecture

Open a page task manager situation

Main process

User input

According to the rules, combine this content with the protocol to synthesize the complete URL.

  1. Determine whether the keyword entered is the search content or the requested URL

  2. For search content: Use the browser’s default search engine to synthesize new URLS with search keywords.

  3. If it is an address, add the protocol and other information

Network request

Strong cache

Before sending a request, the browser determines whether a strong cache policy (including expiration) is matched according to the expires and cache-control fields in the request header. If a strong cache policy is matched, the browser directly obtains resources from the cache and does not send the request. If not, go to the next step.

The DNS

To get the real IP of the requesting service

TCP three-way handshake

First handshake

The client sends a connection request packet segment to the server. The paragraph contains its own initial data communication sequence number. After the request is SENT, the client enters the SYN-sent state. X indicates the initial number of data communication on the client.

Second handshake

After the server receives the connection request packet, if the server agrees to the connection, it sends a response containing its initial data communication number. After the response is complete, the server enters the SYN-received state.

Third handshake

When the client receives a connection approval reply, it sends an acknowledgement message to the server. After sending the packet, the client enters the ESTABLISHED state. After receiving the response, the server also enters the ESTABLISHED state.

HTTPS to shake hands

  1. The client sends the first random value client-random, the required protocol and encryption method

  2. After receiving the random value from the client, the server generates the second random value service-random and sends its own certificate based on the protocol and encryption mode required by the client. (Note if the client certificate needs to be authenticated)

  3. The client receives the certificate from the server and verifies whether the certificate is valid. If the certificate is authenticated, the client encrypts client-random + service-random to generate a third random value, pre-master, and sends the certificate to the server.

  4. After receiving the pre-master random value, the server uses the private key to decrypt the pre-master random value. After the pre-master obtains the three random values, the server generates the master Secret key and sends an acknowledgement message to the browser.

  5. At this time, the client will also have three random values of client-random, service-Random and pre-Maste. Master Secret will be generated according to the previously agreed encryption mode, and the following communication can be encrypted and decrypted using this key

reference

HTTPS

Build request

Respond to the request

Render the page

1. Prepare the rendering process

So what is the same site? It’s the same origin policy as we know it

The same-origin policy

example

Non-reuse process

Open the QQ page, because the new TAB page, a new process

From this page open a news page, because the new TAB page, also different stations, so a new process

The reuse process

Clicking from a website opens a new TAB that is co-located, so the process is reused. But the browser directly add a TAB, and then open the same site, does not reuse the process

From the international section of the news page to the military section, there is no new TAB page, but also the same station, so the reuse process

2. Submit documents

Because of this process, when you type an address into the browser’s address bar, the previous page does not immediately disappear. Instead, it loads for a while before the page is updated.

3. Rendering stage

The whole process

The heart of the browser’s heart is in the rendering phase, so this will be covered in more detail later on.

5. Rendering stage

Here’s a picture that many of you are already familiar with.

And we mainly talk about the following parts, will be introduced one by one.

1. Build a DOM tree

The main process is

Token: Includes Tag Token and text Token. Correspond to our start tag, end tag, and text content.

Example:

2. Style calculation (generate render tree)

Convert the CSS style tostyleSheets

The CSS sources are shown in the following figure, and the priority is the CSS file referenced by element style>

When the conversion is complete, you can see that the document contains a styleSheets, which is the data structure that the browser understands, just like the DOM is converted to tokens.

Attribute value standardization

That is, as we usually have a catty, one or two weight statement, all converted thousands of restraint.

Style calculation

When we talk about style computing, we have two concepts.

  • ** Inheritance rules: ** Each node may contain the style of the parent node

  • ** Cascading rules: ** defines an algorithm for merging attribute values from multiple sources

Regarding inheritance, you can see that browsers have a number of default styles that are inherited by each DOM node, but whether they are used on the node is up to you

  1. Assuming that the parent attribute a is inherited, whether there is the same attribute corresponding to the same DOM is denoted by B

  2. If B has a higher priority than A, use B’s style.

So how do you decide which style has a higher priority? You can refer directly to the MDN priority description

For cascading style sheets, the purpose is to prioritize styles, refer to MDN cascading rules

Based on these two rules, each DOM ends up generating a Computed style

3. Layout stage (generate layout tree)

The rendering tree generated in front is like the furniture that the merchant sells, all kinds of blowing, all kinds of good, what suits us. How to choose, sent to the home after choosing, how to put, it is to need to think. The layout phase does this by calculating the location of each DOM node and storing it in the layout tree.

The main logic

The main process

4. Layer Construction (Generate layer tree)

Just like the concept of photoshop layers, browsers will layer the elements they want to display, just like in Photoshop, to facilitate partial rendering. ** For example, this is an IQiyi page layer, as you can see, divided into 14 layers.

In general, not every node in the layout tree contains a layer, and if a node has no corresponding layer, then the node is subordinate to the layer of the parent node. And the conditions that will create a new layer are these

Finally, through such a few rules, according to the layout tree, layer tree generation

5. Layer Drawing stage (generate drawing list)

Just like painting oil paintings, there is a step, first line, after the far scenery, after the near scenery. Simply put, the layer drawing stage is a stage to generate the drawing instruction table.

The main process

Below is a list of instructions for a layer

6. Block

Why slice it up? As we move, often some beds ah, cabinet ah what, are very big, can not take the door, at this time we need to remove it, a piece of it. So, page size can be larger than window size.

Take, for example, the diagram below.

7. Rasterization (generating bitmaps)

Rasterization simply means converting our blocks into bitmaps. So what is a bitmap? It’s a 01 collection that the browser renderer can understand. The compositing thread generates bitmaps in preference to blocks near the viewport.

The main process is

  • Each diagram block calls the rasterization thread

  • The rasterization thread will give the drawing instruction of graph block to GPU to generate bitmap and save it in GPU memory

Synthesis 8.

This phase is the final phase of the browser transition to the user, just like we do the demand launch.

9. To summarize

  1. The renderer transforms the HTML content into a readable DOM tree structure.

  2. The rendering engine converts CSS styleSheets into browser-understandable styleSheets, calculates the STYLE of DOM nodes, and forms a ComputedStyle.

  3. Create a layout tree in which information about the layout information of the element is stored.

  4. Layer the layout tree and generate the layer tree.

  5. Generate a draw list for each layer and submit it to the composition thread.

  6. The composite thread divides the layer into blocks and converts the blocks into bitmaps in the rasterized thread pool.

  7. The composite thread sends the DrawQuad command to the browser process.

  8. The browser process generates the page from the DrawQuad message and displays it on the monitor.

6. Related concepts

reference

Geek Time fundamentals of Browsers

Juejin. Cn/post / 693523…

Juejin. Cn/post / 684490…