The introduction

What happened to that common interview question about entering a URL in a browser and presenting the page? I think everyone can say something or two. However, this is a very insightful question, and whether you answer it in depth will go a long way toward making an interviewer’s impression.

And, all kinds of information on the Internet are superficial to explain this process, often appear today to see this version, tomorrow to see another version of the situation. So, this time, let’s take a look at the whole process

Chrome multi-process architecture

First, before we dive into the process, we need to take a look at Chrome’s multi-process architecture. This is because the entire process from entering the URL in the browser to rendering the page is done by the various processes in the Chrome architecture.

Chrome’s multi-process architecture:

  • Browser process, which is responsible for the user interface (address bar, menus, and so on), child process management (for example, interprocess communication and data transfer), storage, and so on
  • The render process, which is responsible for what will be receivedHTMLDocuments andJavaScriptAnd so on into the user interface
  • A network process that is responsible for requesting network resources, for exampleHTTPThe request,WebSocketThe module
  • GPUThe (graphics processor) process that is responsible forUIDisplay of interface
  • Plug-in process, which is responsible for managing plug-ins

Second, detailed explanation of the process

2.1 Parsing Input

This process occurs when the user enters a URL in the address bar, and the address bar determines the following based on the user’s input:

  • Input right and wrongURLStructure, the string is searched using the browser’s default search engine
  • The input isURLStruct string, the complete is builtURLStructure, browser process will be completeURLThrough interprocess communication, i.eIPCTo the network process

2.2 Request Process

When a network process receives a URL, it does not immediately request the specified URL. First, perform DNS to resolve domain names to obtain corresponding IP addresses, and then use ARP to resolve IP addresses to obtain corresponding Media Access Control addresses (MAC) addresses.

Domain names are a solution for us to replace memorizing complex IP addresses, which are the nodes where targets are assigned in the network. The MAC address is the fixed address of the target NIC.

1. The DNS

The DNS resolution process is divided into the following steps:

  • Query browserDNSThe cache
  • Ask the local operating systemDNSCache (that is, find localhostFile)
  • askISP(Internet Service Provider) of Internet service providers (e.g. Telecom, mobile)DNSThe server
  • Ask the root server. This process can do both recursive and iterative lookups, both of which ask the TOP-LEVEL domain name server for lookups first

2. Communication process

First, the TCP connection is established, which is the three-way handshake process:

  • Client sends markedSYNIndicates that I am about to send a request.
  • The server sends markedSYN/ACKIndicates that I have received a notification telling the client to send the request.
  • Client sends markedACKI’m about to start sending the request, ready to be accepted.

Then, the TCP channel is used for data transmission:

  • The server receives the packet and sends an acknowledgement message to the client, repeating the process
  • If the client does not receive the confirmation message from the server after sending a data packet, it resends the data packetTCPRetransmission mechanism
  • After receiving all the data packets, the receiving end will follow theTCPThe need to proceed in the headerThe sortingTo form complete data

Finally, the TCP connection is disconnected, the quad handshake process:

  • The client sends a request for disconnection and enters the waiting phase. In this case, the client does not send data but continues to receive data.
  • After receiving the request, the server notifies the client that it understands the request. In this case, the server enters the waiting state and does not receive data, but continues to send data.
  • After the client receives the packet, it goes to the next stage.
  • After sending the remaining data, the server informs the client that the connection can be disconnected. In this case, the server does not send or receive data.
  • When the client receives this message, it tells the server that I am disconnected.
  • After receiving the message, the server disconnects.

The client of this whole process is the network process. In addition, redirection may occur during data transmission. That is, when the network process receives a response packet with the status code of 3XX, it redirects according to the value of the Location field in the header field of the response packet, that is, it initiates a request again

3. Data processing

When the network process receives the status code of the response packet, it performs the corresponding operation. For example, when the status code is 200 OK, the content-Type header field in the response packet will be parsed. For example, application/javascript, Text/CSS and text/ HTML will appear in the content-type field in our process. That is, corresponding to Javascript files, CSS files, HTML files.

For a detailed explanation of MIME types, see MDN

2.3 Creating a renderer

When you currently need to render HTML, you need to create a render process for later rendering of the HTML. For renderers, the same site can share a renderer. For example, and can share a renderer. Otherwise, the renderer process needs to be recreated

It is important to note that the same site refers to the top-level domain and the second-level domain equal

2.4 Start rendering

After the renderer process is created, the network process will pass the received HTML, JavaScript and other data to the renderer process. After the rendering process receives the data, several things happen to the user interface:

  • Update the security status of the address bar
  • Update the address barURL
  • Forward and backward nowenableTo display the loading status
  • Update web page

2.5 Rendering Process

Everyone knows that the page rendering process is a separate point in the interview, and it often leads to another question: how to avoid backflow and redraw.

The rendering process is the final step in the process from entering the URL in the browser to rendering the page. The page rendering process can be divided into 9 steps:

  • parsingHTMLgenerateDOM
  • parsingCSSgenerateCSSOM
  • Load or executeJavaScript
  • Generate render tree (Render Tree)
  • layout
  • layered
  • Generate draw list
  • rasterizer
  • According to

2.5.1 Building a DOM Tree

Because the network process passes the HTML string to the renderer, the renderer needs to convert the HTML string into a DOM tree. Such as:

Note that this DOM tree is different from the ONE in the Element TAB in Chrome-Devtool. It exists in memory and provides JavaScript manipulation of the DOM.

2.5.2 build CSSOM

The process of building CSSOM is to generate CSSOM by parsing CSS files, style tags, inline styles, and so on. And this process does a few things:

  • specificationCSS, that is,color: blueConverted intocolor: rgb()The form can be interpreted as similarES6ES5The process of
  • Compute element styles, for exampleCSSThe style inherits the parent style, as infont-size,colorAnd so on.

The CSS Object Model is a set of apis that allow CSS manipulation with JavaScript. See MDN for details on the API

2.5.3 loads the JavaScript

Typically, if JavaScript is loaded at the same time as building a DOM tree or CSSOM, the build of the former will be suspended. Of course, we can load JavaScript asynchronously by defer or sync. Both defer and sync can load JavaScript asynchronously, but the former waits for the CSSOM and DOM tree to build before executing the JavaScript, while the latter executes immediately after the asynchronous load, which still blocks using sync.

The process of JavaScript execution, however, is the process of compiling and running JavaScript. Because JavaScript is an interpreted language. So the process would look something like this:

  • For each line of code, i.eToken
  • According to theTokenTo generate theAST(Abstract Sytanx TreeAbstract syntax tree and create context
  • The interpreter parses and executesASTGenerate bytecode.
  • The compiler generates machine code for the code that needs to be executed repeatedly to improve operation efficiency

2.5.4 Render Tree Generation

Once you have the DOM Tree and CSSOM, you need to combine the two to generate the Render Tree, and this process removes the display: node nodes. At this point, the render tree has the element and its style information.

2.5.5 layout

According to the Render Tree, each node in the Tree is calculated to determine the width, height and position of each node in the page.

It is important to note that the first process of determining the size and location of nodes is called layout, while the second is called backflow

2.5.6 layered

Because of the cascading context, the rendering engine creates layers for elements that have the cascading context, and the combination of layers creates some of the page effects we see. For example, some 3D effects and animations are based on layers.

It is worth mentioning that there is also stratification for content overflow with rollers

2.5.7 Generating a Drawing List

For the part of the page that has layers, it needs to be drawn in order, and for this process, the rendering engine will divide the layer drawing into drawing instructions, and form a drawing list according to the layer drawing order.

2.5.8 rasterizer

Once you have a drawing list, the compositing thread in the render engine blocks the layer according to the size of the current viewport. The compositing thread then generates a bitmap of the blocks near the viewport, known as rasterization. The renderer process also maintains a rasterized thread pool for converting blocks into bitmaps.

The rasterization process usually uses GPU acceleration. For example, if wil-change and opacity are used, the display will be accelerated by GPU

2.5.9 display

When all the blocks are rasterized, the compositing thread in the rendering engine generates instructions to draw the blocks and submits them to the browser process. The browser process then draws the page into memory. Finally, the memory drawing results are displayed on the user interface.

And this whole process from the generation of drawing list, raster, display, is often referred to as the process of redrawing


The whole browser input URL to page rendering process involves a very wide range of knowledge, such as Chrome multi-process architecture, HTTP communication process, browser parsing JavaScript process, browser page drawing process and some basic computer knowledge and so on, and, This whole process is closely related to Chrome-DevTools, so it is very important to use chrome-DevTools well. There should be a guide to using Chrome-DevTools in the future. Of course, there are still many shortcomings in this article

Writing is not easy, if you feel there is a harvest, you can handsome three combos!!