1 Processes and threads

1.1 Processes and Threads:

  • A process is the smallest unit of resource allocation, and a thread is the smallest unit of execution and scheduling recognized by the operating system
  • A process can have multiple threads running in the process. A thread can only belong to one process.

1.1.1 nature

  • A process is running instance of a program, start a program, the operating system can create a piece of memory for the program, used to store data in a code, running and a main thread on a mission, such a running environment is the process, process with independent stack space and data segments, overhead is large, but are independent of each other between process, high safety, And one crash does not affect the others.
  • Thread has an independent stack space, but shared data segment, low overhead, fast switching speed, high efficiency, thread can not exist alone, it is started and managed by the process, because the thread is moving between processes, a thread crash will crash the whole process.
  • The failure of any thread in the process will cause the entire process to crash
  • Threads share data in a process
  • When a process is shut down, the operating system reclaims the memory occupied by the process
  • The contents of the processes are isolated from each other

1.1.2 communication

  • Because processes are independent from each other, the communication mechanism is also relatively complex.
  • Multiple threads running in the same process, communication is more convenient;

1.3.1 applicable

  • Frequent creation and destruction, frequent switching of threads;
  • Multi-machine distribution process, multi-core distribution thread;

2 Browser History

2.1 Single-process Browser

Disadvantages:

  • Unstable: Plugins, complex JS code causing the rendering engine module to crash can cause the entire browser to crash
  • Not smooth: only one module can be executed at a time, and page memory leaks
  • Unsafe: Plug-ins and scripts can obtain system permissions through the browser, causing security problems

2.2 Early multi-process browsers

There are master processes, plug-in processes, renderers

  • Security: Applications running in the sandbox cannot write any data to the hard drive or read any data from sensitive locations. Chrome locks the plugin and renderer processes in the sandbox so that malicious applications cannot break through the sandbox to gain system access.

2.3 Current Multi-process Browser Architecture:

The multi-process browser prevents the entire browser from crashing due to the crash of one page or plug-in, which improves user experience but also increases the consumption of system resources

The main processes of the browser are as follows :(main browser process, third-party plug-in process, rendering process, network process, and GPU process)

  • Browser process: the main process, only one, is responsible for interface display, user interaction, child process management, and storage.
  • Render process: The core task is to turn HTML, CSS, and JavaScript into web pages that users can interact with. Both the typography engine Blink and JavaScript engine V8 run in this process. By default, Chrome creates a rendering process for each Tab Tab. For security reasons, renderers are run in sandbox mode.
  • GPU process: Actually, Chrome didn’t have a GPU process when it was first released. The original intention of using GPU was to achieve 3D CSS effect, but later the UI interface of web page and Chrome were drawn on GPU, which made GPU become a common requirement of browser. Finally, Chrome has introduced GPU processes on top of its multi-process architecture.
  • Web process: responsible for loading web resources on a page. It used to run as a module in the browser process until recently, when it became a separate process.
  • Plug-in process: the plug-in process is mainly responsible for running plug-ins. Plug-ins are prone to crash. Therefore, the plug-in process is isolated to ensure that the plug-in process crash does not affect the browser and page.

Browsers have multiple processes, in which the main operations of the front end take place in the renderer process, which is multi-threaded.

2.3.1 The rendering process is multithreaded

Here are some of the resident threads in the renderer:

  • GUI rendering thread: parsing HTML and CSS files, rendering pages, redrawing and rearranging;
  • JS engine thread: Processing javascript scripts (note: GUI rendering thread and JS engine thread are mutually exclusive, GUI thread will be suspended when JS engine thread executes, so long JS execution may cause page rendering block);
  • Event trigger thread: Maintain an event queue, when an event is triggered, add it to the end of the event queue, wait until the JS engine is idle to process;
  • Timer thread: the thread where setInterval and setTimeout are located. Because the JS engine may block and affect the timing accuracy, the timing is controlled by a separate thread. After the timing is completed, it is added to the end of the event queue for processing by the JS engine.
  • Asynchronous request thread: creating an asynchronous request creates a new thread. When a state change is detected and a callback function is set, the callback is added to the end of the event queue, waiting for the JS engine to process it.

3 Browser data transfer

Data on the Internet is transmitted in packets. If a large amount of data is sent, it is broken up into smaller packets for transmission.

3.1 the TCP/IP

3.1.1 IP: Sends data packets to the destination host

The computer’s address becomes an IP address, and visiting any website is really just your computer asking another computer for information.

3.1.2 UDP: Sends data packets to the application

One of the most important information in UDP is the port number. The port number is actually a number. Every program that wants to access the network needs to bind a port number, through which UDP can send the specified packet to the specified program.

But there are two problems with UDP transmission:

  • UPD does not have a retransmission mechanism for incorrect data packets, so data reliability cannot be guaranteed. However, UPD has a high transmission speed, which is suitable for online video and interactive games.
  • Large files are broken up into smaller packets for transmission, which arrive at the receiver at different times, and UDP does not know how to assemble these packets into a complete file.

IP uses IP address information to send packets to specific computers, while UDP uses port numbers to send packets to the correct programs.

3.1.3 TCP: connection-oriented, reliable, byte stream based transport layer communication protocol

In addition to containing the destination port and native port number, the TCP header also provides a sequence number for sorting, from which packets are rearranged.

Features:

  • Provides a retransmission mechanism in case of packet loss
  • The packet sorting mechanism is introduced to ensure that the packets out of order can be combined into a complete file

The complete life cycle of a TCP connection

  • Establish a connection: Three handshakes
  • Data transmission: The receiving end will confirm each packet
  • Disconnect: Four waves

TCP sacrifices the speed of packet transmission to ensure the reliability of data transmission.

3.2 HTTP

Based on TCP connections, HTTP allows the browser to obtain resources from the server. It is the foundation of the Web and the most widely used protocol by browsers.

3.2.1 Process for Sending HTTP Requests on the Browser

  • 1. Build request:

Build the request row, and then prepare to initiate the network request

  • 2. Find cache:

If a cached resource exists, the request is intercepted and a copy of the resource is directly returned. If no cached resource exists, the network request process is entered

  • 3. Prepare IP addresses and ports.

The request DNS (domain name System) returns the IP address of the domain name. If the domain name has been resolved, the browser caches the resolution result and saves one network request

  • 4. Establish a TCP connection:

Three-way handshake

  • 5. Send an HTTP request:

Once the TCP connection is established, the browser can communicate with the server. The browser sends the following information to the server: Request line: request method, request URI, and HTTP protocol version Request Header: Basic browser information Request body: Information data

  • 6. The server returns an HTTP request

The server returns the following information to the browser: response line: protocol version, status code Response header: server information, returned data type, and Cookie to be stored on the client

> Special case: > If redirection is set and the status code of the return line is 301, the page is redirected directly to the url returned in the Location field in the response header.Copy the code

Response body: information data

  • 7. Disconnect

Four times to wave

4 Browser Rendering

  • 1. Build a DOM tree

Parsing the HTML into a DOM tree

  • 2. Generate standardized stylesheets

Parse CSS to styleSheets and standardize its property values

  • 3. Compose a styled DOM tree

Calculate the style of each DOM node and synthesize a DOM tree with style

  • Layout of 4.

Create a layout tree and calculate the coordinate position of each node and save it in the layout tree

  • 5. The layered

Elements that have a cascading context property or need to be clipped are promoted to a single layer, and the browser page is actually divided into many layers, which are superimposed to form the final page

  • 6. Generate a layer drawing list

The drawing of layers includes a certain drawing order and many small drawing instructions, and the unified output is the drawing list

  • 7. Build a DOM tree

The rendering engine’s compositing thread performs rasterization based on the drawing list. Rasterization refers to the conversion of a block to a bitmap, which is accelerated using a GPU, and the generated bitmap is stored in the GPU.

  • 8. Show

When rasterization is complete, the composite thread notifies the browser process, which displays the content on the display based on the received message.

What happens in the browser, from entering the URL to displaying the page?

Reference:

Time.geekbang.org/column/arti… www.dailichun.com/2018/01/21/… www.cnblogs.com/quanshubli/… Blog.csdn.net/didudidudu/…