Simple process introduction

From entering a URL to displaying a page, the browser is simply opening a page from the user’s point of view. However, in order to make the user can use the browser safely and conveniently, the browser has made a lot of efforts. Let’s take a look at some of the browser’s efforts.

Let’s talk briefly about the steps of the browser at the web level.

  • First, the browser process receives the URL request entered by the user, and the browser process forwards the URL to the network process.
  • The actual URL request is then made in the network process.
  • The network process then receives the response header data, parses it, and forwards it to the browser process.
  • After receiving the response header data from the web process, the browser process sends a “submit navigation” message to the renderer process.
  • After receiving the “submit navigation” message, the renderer process is ready to receive THE HTML data by directly establishing a data pipeline with the network process.
  • Finally, the renderer process “confirms submission” to the browser process, which tells the browser process that it is ready to accept and parse the page data. When the browser process receives a “submit document” message from the renderer, it removes the old document and updates the page state in the browser process.

Start with processes and threads

In the above instructions, there is one word mentioned all the time — process. What is process?

A process is a running instance of a program. When a program is started, the operating system creates a block of memory for the program, which is used to store code, running data and a main thread to perform tasks. We call such a running environment a process. Thread is attached to process, and using multi-thread parallel processing in process can improve computing efficiency.

What are the characteristics between threads and processes?

  1. The failure of any thread in the process will cause the entire process to crash.
  2. Threads share data in a process.
  3. When a process is shut down, the operating system reclaims the memory occupied by the process.
  4. The contents of the processes are isolated from each other.

See the above characteristics, through the development and use of the browser, people also found that if only opened up a piece of memory, only a process to perform all browser threads processing, the following problems will occur:

  1. ** First, instability. ** Once a thread crashes, the impact on the entire browser process is huge, affecting customer use. Think you are eating hot pot singing, suddenly met hemp bandits.
  2. Second, it’s not smooth. Because all the rendering is done by a single thread, if a javascript script takes a long time to render appears in the rendering, the user can only wait for the screen to go blank or run away.
  3. Finally, it’s not safe. All threads are in one process, and if someone injected malicious code, they would get all the information.

Due to the above disadvantages, modern browsers use multi-process mode:

Browser process, renderer process, GPU process, network process, plug-in process
  • Browser process. It is mainly responsible for interface display, user interaction, sub-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.
  • Process of GPU. In fact, 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.
  • Network process. It is responsible for loading web resources on the page. It used to run as a module in the browser process until recently, when it became a separate process. Plug-in process. It is mainly responsible for the running of plug-ins. Plug-ins are prone to crash. Therefore, plug-ins need to be isolated through the plug-in process to ensure that the plug-in process crash does not affect the browser and page.
  • Plug-in process

Talk about HTTP and TCP transport

With that said, let’s move on to the second part of the process, which involves the network process. Whether it is now or in the future of the Internet of all things, the network is certainly the knowledge we have to contact and learn.

Most simply, let’s look at the transport layer and the network layer of the network

  • Data on the Internet is transmitted through data packets, which are easy to lose or make errors during transmission.
  • IP is responsible for delivering packets to the destination host.
  • UDP is responsible for delivering data packets to specific applications.
  • While TCP can ensure the complete transmission of data, its connection can be divided into three stages: establishing a connection, transmitting data and disconnecting.

How information is transmitted between the browser and the server is shown below:

The content is passed through layers in host A, with TCP and Ip headers added. Then, in host B, the contents of the transmission are separated layer by layer, and finally the content of the transmission is obtained in the upper layer.

As can be seen from the figure above, the life cycle of a complete TCP connection consists of three phases: “Establishing a connection”, “transferring data” and “disconnecting”.

  • First, establish the connection phase. This phase establishes the connection between the client and server through a “three-way handshake.” TCP provides connection-oriented communication transport. Connection-oriented refers to the preparation work between the two ends before data communication begins. The three-way handshake means that when a TCP connection is established, the client and server send a total of three packets to confirm the connection.
  • Secondly, the data transmission stage. At this stage, the receiving end needs to confirm each packet. That is, after receiving the packet, the receiving end needs to send the confirmation packet to the sender. Therefore, if the sender does not receive the confirmation message from the receiver within a specified period after sending a data packet, the packet is considered lost and the retransmission mechanism is triggered. Similarly, a large file is divided into many small packets during transmission. After these packets arrive at the receiving end, the receiving end sorts them according to the sequence number in the TCP header to ensure complete data.
  • Finally, the disconnect phase. Once the data is transferred, the connection is terminated, which involves the final stage of “four waves” to ensure that both parties are disconnected.

Prepare the render process

By default, Chrome assigns a render process to each page, meaning that a new render process is created for each new page opened. However, if a new page is opened from one page and belongs to the same site as the current page, the new page will reuse the parent page’s rendering process.

Once you have the render process ready, just wait for the document data to come in from the network process. The process is as follows:

  • The browser process sends the “submit document” message to the renderer process
  • After receiving the “submit document” message, the rendering process and the network process establish a pipeline to transfer data;
  • After the document data transfer is complete, the renderer process returns a “confirm submit” message to the browser process.
  • After receiving the “confirm submission” message, the browser process updates the browser interface status, including the security status, the URL of the address bar, the historical status of forward and backward, and the Web page.

This explains why, when you type an address into your browser’s address bar, the previous page doesn’t disappear immediately, but instead takes a while to load before the page is updated.

So after the browser updates the page, the whole process from URL input to page presentation is done. Next time, we’ll talk about exactly what the render process does. The ones that we usually involve in redrawing and rearranging.

Thank you

Thank you for reading this article. I hope it will be helpful to you. If you have any questions, please point out.

I’m a pumpkin (✿◡ ◡), thumbs up if you think it’s ok ❤.