Working principle and practice summary of browser I

Time:2020-2-6

1、 Common chrome architecture

How many processes does chrome need to start to open a page? You can click the “options” menu in the upper right corner of Chrome browser, select the “more tools” submenu, and click “task manager” to view


Related concepts

Parallel processing: processing multiple tasks at the same time * * (multithreading, greatly improving performance)


Threads vs processes: 1. Threads cannot exist alone. They are started and managed by processes. 2. When a program is started, the operating system will create a block of memory for the program to store code, running data and a main thread executing tasks. We call such a running environment a process.


Threads are dependent on the process, and the use of multi-threaded parallel processing in the process can improve the efficiency of operation.

  1. If any thread in the process fails to execute, the whole process will crash.
  2. Data in the process is shared between threads.
  3. When a process is shut down, the operating system reclaims the memory used by the process.
  4. Content between processes is isolated from each other. The mechanism of interprocess communication (IPC) is adopted.

Single process browser means that all the functional modules of browser run in the same process, including network, plug-in, JavaScript running environment, rendering engine and page. There are three reasons to use the single process browser:

  • Instable
  • Unsmooth
  • Unsafe

Chrome process architecture (multithreading)

Working principle and practice summary of browser I
As you can see from the figure, the latest Chrome browser includes: 1 browser main process, 1 GPU process, 1 network process, multiple rendering processes and multiple plug-in processes.


Let’s analyze the functions of these processes one by one.

  • Browser process. It is mainly responsible for interface display, user interaction, sub process management and storage.
  • Rendering process. The core task is to transform HTML, CSS and JavaScript into web pages with which users can interact. Blink and V8 are both running in this process. By default, chrome will create a rendering process for each tab tag. For security reasons, the rendering process runs in sandbox mode.
  • GPU process. The original intention of GPU is to achieve the effect of 3D CSS, but then the UI of web page and chrome all choose to use GPU to draw.
  • Network process. It is mainly responsible for the loading of web resources of the page. It was previously run as a module in the browser process, but it was only recently independent and became a separate process.
  • Plug in process. It is mainly responsible for the running of plug-ins. Because plug-ins are easy to crash, they need to be isolated through plug-in processes to ensure that plug-in process crashes will not affect browsers and pages.

In addition to improving the stability, fluency and security of the browser, the multi-threaded model also brings:

  • Higher resource usage. (memory consumption)
  • More complex architecture. (high coupling and poor scalability between browser modules)

Explore future service-oriented architecture


2、 TCP protocol to ensure that the page file can be delivered to the browser completely


When measuring the performance of web pages, there is an important indicator: “FP” refers to the length of time from page loading to first drawing. Affect FP index: network loading speed.


Http WebSockets are all based on TCP / IP, which is the foundation of optimizing the loading speed of web pages.


How to ensure that the page file can be sent to the browser completely?

From the perspective of data package

Working principle and practice summary of browser I
IP is responsible for sending packets to the destination host.


2. UDP: send packets to the application program, because IP is a very low-level protocol, which is only responsible for sending packets to the other computer, but the other computer does not know which program to send the packets to. Therefore, it is necessary to develop protocols that can deal with applications based on IP. Common“User packet protocol”It’s called UDP.

Working principle and practice summary of browser I
IP sends packets to the designated computer through IP address information, while UDP distributes packets to the correct program through the port.


What are the problems with UDP:

  • 1、 When UDP sends data, there will be packet loss due to various factors, and no retransmission mechanism is provided, so data reliability cannot be guaranteed.
  • 2. UDP transmission speed is very fast, so UDP will be applied in some areas that pay attention to speed, but not so strict requirements for data integrity, such as online video, interactive games, etc.

In order to solve the problem that UDP packets are easily lost, TCP is introduced.


TCP: it is a connection oriented, reliable, byte stream based transport layer communication protocol that delivers data to applications completely.


There are two characteristics of TCP:

  • 1. In case of packet loss, TCP provides retransmission mechanism;
  • 2. TCP introduces packet sorting mechanism to ensure that the disordered packets are combined into a complete file.

The life cycle of a complete TCP connection includes:

  • 1. Establish a connection
  • 2. Transfer data
  • 3. Disconnect

Working principle and practice summary of browser I
In order to ensure the reliability of data transmission (a large piece of data transmission is guaranteed through the TCP header), TCP sacrifices the transmission speed of data packets, because the “three handshakes” and “packet verification mechanism” have doubled the number of data packets in the transmission process.


3、 HTTP request process, many sites will open the second time quickly?

The HTTP protocol is based on the TCP connection (HTTP application layer, TCP transport layer). HTTP is a protocol that allows the browser to obtain resources from the server. It is the basis of the web.


Why do many sites open quickly for the second time? All of this is hidden in HTTP requests.


HTTP request process initiated by browser:

  • 1. Build the request line information. After building, the browser is ready to launch the network request.
  • 2. Find cache.

Before the actual network request is initiated, the browser will first query the browser cache for the file to be requested. Among them, browser caching is a technology that saves a copy of the resource locally for direct use at the next request. Initiate a network request – cache the saved copy of the browser – intercept the request – return the copy of the resource – end the request (do not go to the server to download the resource again)

The advantages of doing so: 1. Relieve the pressure on the server side, improve the performance (take less time to acquire resources) 2. For websites, caching is an important part of fast resource loading.

  • 3. Prepare IP address and port

The first step of HTTP network request is to establish a TCP connection with the server. The first step of establishing a TCP connection is to prepare the IP address and port number (HTTP default 80, HTTPS default 443). DNS data cache service resolves the domain name for next direct use, which will reduce one network request.

  • 4. Waiting for TCP queue

Chrome has a mechanism. At most six TCP connections can be established for the same domain name at the same time. If there are 10 requests under the same domain name at the same time, then four requests will enter the queuing status until the request is completed in progress.

  • 5. Establish a TCP connection
  • 6. Send HTTP request (request line, request header, request body (data)) get and post methods

The server side processes HTTP requests sent by the browser side

  • 1. Return request (success status code 200, page 404 not found, response line, response header, response body)
  • 2. Disconnect (server returns request data to client, closes TCP connection)
  • 3. Redirection

Will the second page open soon?

  • 1. DNS cache
  • 2. Page resource cache

DNS cache: association of browser local IP and domain name
Page resource cache: response header cache control field to set whether to cache the resource. The duration is the max age parameter setting.

Cache-Control:Max-age=2000

If the cache resource expires, the request will continue to be initiated.

Many websites can be opened in seconds for the second visit because they cache many resources locally. The browser cache directly uses the local copy to respond to requests without generating real network requests, thus saving time. At the same time, the DNS data is also cached by the browser, which eliminates the DNS query link.


How do I stay logged in?

Working principle and practice summary of browser I


4、 What is the experience from entering URL to displaying page?

The whole process needs cooperation among processes:

  • Browser process: mainly responsible for user interaction, sub process management, file storage and other functions.
  • Network process: it provides network download function for rendering process and browser process.
  • Rendering process: the main responsibility is to parse HTML, JavaScript, CSS, pictures and other resources downloaded from the network into pages that can be displayed and interacted. Because all the content of the rendering process is obtained through the network, there will be some malicious code using browser vulnerabilities to attack the system, so the code running in the rendering process is not trusted. That’s why chrome makes the rendering process run in a safe sandbox to ensure the security of the system.

Regardless of the user’s input of search keywords:

1. User input URL and enter
2. The browser process checks the URL, assembles the protocol, and forms a complete URL
3. Browser process sends URL request to network process through IPC
4. After receiving the URL request, the network process checks whether the request resource is cached in the local cache, and if so, returns the resource to the browser process

5. If not, the network process initiates HTTP request (network request) to the web server. The request process is as follows:
    5.1 DNS resolution to obtain the IP address and port of the server (HTTP port is 80 by default, HTTPS port is 443 by default)
    5.2 using IP address to establish TCP connection with server
    5.3 build request header information
    5.4 send request header information
    5.5 after the server responds, the network process receives the response header and response information, and analyzes the response content
6. Network process analysis response process;
    6.1 check the status code. If it is 301 / 302, it needs to be redirected. Read the address from the location automatically and repeat step 4. 301 resources are permanently removed and 302 resources are still in use.          
    6.2 200 response processing:
        Check the response type content type. If it is a byte stream type, submit the request to the download manager. The navigation process is finished and will not be carried out again
        For subsequent rendering, if it is HTML, inform the browser process to prepare the rendering process for rendering.
7. Preparing the rendering process
    7.1 browser process check whether the current URL is the same as the root domain name of the previously opened rendering process. If it is the same, reuse the original process. If it is different, start a new rendering process
8. Transfer data, update status
    8.1 when the rendering process is ready, the browser sends a "submit document" message to the rendering process, and the rendering process receives the message and establishes a "pipeline" for data transmission with the network process
    8.2 after receiving the data, the rendering process sends "confirm submission" to the browser
    8.3 after receiving the confirmation message, the browser process updates the browser interface status: security, address bar URL, forward and backward history status, and updates the web page.    
9. The rendering process performs page parsing and sub resource loading on the document, and html is converted to DOM tree through the HTML parser
 (the binary tree is similar to the structure). CSS is converted into cssom tree according to CSS rules and CSS interpreter, and the two trees are combined,
  Form rendertree (not including the specific elements of HTML and the specific location of elements to be drawn),
  Through layout, you can calculate the specific width and height color position of each element, combine them, start to draw, and finally display them on a new page in the screen

5、 Rendering process: how does HTML, CSS and JavaScript become pages?

The rendering mechanism is too complex, so the rendering module will be divided into many sub stages during the execution process. The input HTML will go through these sub stages and finally output the pixels. We call such a processing flow rendering pipeline.
From HTML to DOM, style calculation, layout, layer, drawing, rasterizing, compositing, and display

  • DOM tree: the rendering process converts HTML content into a readable DOM tree structure.
  • Style calculation: the rendering engine converts the CSS style sheet into the style sheets that can be understood by the browser, and calculates the style of the DOM node.
  • Layout tree: create a layout tree and calculate the layout information of the element.
  • Layering: layering the layout tree and generating the layering tree.
  • Paint: generates a paint list for each layer and submits it to the compositing thread.
  • Rasterization: the composite thread divides the layer into blocks and converts the blocks into bitmaps in the rasterization thread pool.
  • Composition: the composition thread sends the draw block command drawquad to the browser process.
  • Display: the browser process generates pages based on drawquad messages and displays them on the display.

Rearrangement: if you modify the geometric position attributes of an element through JavaScript or CSS, such as changing the width and height of the element, then the browser will trigger the rearrangement. After the analysis, a series of sub stages, this process is called rearrangement. There is no doubt that the rearrangement needs to update the complete rendering pipeline, so the cost is also the largest.


Redraw: if the background color of the element is modified, the layout phase will not be executed, because it does not cause the change of the geometric position, so it directly enters the drawing phase, and then a series of sub phases are executed. This process is called redraw. Compared with rearrangement, redrawing saves the layout and layering stages, so the execution efficiency will be higher than rearrangement.


Composite: what happens if you change an attribute that does not want to be laid out or drawn? The rendering engine will skip layout and painting and only perform subsequent compositing operations, which we call compositing.


There are many ways to reduce redraw:

  1. Use class operation style instead of frequent operation style
  2. Avoid table layout
  3. Batch DOM operations, such as createdocumentfragment, or using frameworks, such as react
  4. Debounce window resize event
  5. Separate the reading and writing of DOM attribute
  6. Will change: Transform to optimize.

Course address