In the field of front-end development, many interviewers often ask “what happens when the browser goes from typing a URL to displaying a page?” Instead of thinking about how the interviewer knows how browsers work, ask yourself if you know how browsers work. This interview question is a comprehensive examination of candidates’ knowledge, which involves a series of knowledge such as the network, operating system, Web.

The graph below is from Learning Geek Time how Browsers Work and Practice

This piece of full flow diagram, and I look at the others interview question answer is not the same as before, it is not the answer for the interview, from the Angle of the learning principle of the browser to see the interview questions, according to the previous interview answers from input URL IP address and domain name, if it is a domain name to resolve domain name to obtain IP address and then find the target server, Based on the request information, the browser returns the response information to the browser, and then the browser starts rendering, and finally renders the page after rendering. For people who have never understood the principles of browsers, they can only memorize the answers, for domain name resolution, IP addressing, HTTP network requests, rendering process, etc. The following is to analyze this problem from a larger perspective from the perspective of the author learned.

As can be seen from the figure above, the whole process needs cooperation among various processes, and the process responsibilities are as follows:

  • Browser processes are responsible for user interaction, child process management, and file storage.
  • Web processes are web downloads for renderers and browser processes.
  • The rendering process is mainly responsible for parsing HTML, JavaScript, CSS, images and other resources downloaded from the Web into pages that can be displayed and interacted with. Because all the renderer content is obtained through the network, there will be some malicious code to exploit browser vulnerabilities to attack the system, so the code running in the renderer process is not trusted. This is why Chrome makes the rendering process run in a security sandbox, just to keep the system safe.

On what is a process, what is a thread, see a good article to explain the good, recommend everyone to read “from browser multi-process to JS single thread, JS running mechanism of the most comprehensive comb”

  • processIs the smallest unit of CPU resource allocation (the smallest unit that can own resources and operate independently)
  • threadIs the smallest unit of CPU scheduling. (Thread is the unit of running a program at a time based on the process.A process is a running instance of a programWhen a program is started, the operating system creates a block of memory for the program to hold the code, the running data, and a main thread to perform tasksprocess.

Go back to the nodes marked with a blue background in the figure above:

  • First, the user clicks from the browser processInput request information;
  • Then, the network processMaking a URL request;
  • After the server responds to the URL request, the browser process starts againPrepare the render processA;
  • When the renderer is ready, it first submits the page data to the renderer, which we callSubmit the documentStage;
  • Once the rendering process receives the document information, it beginsParses the page and loads the child resourcesTo complete the page rendering.

From entering URL to page display

Let’s take a look at some of the core nodes

User input

After the user enters the URL, the browser starts to load the address, and the icon on the TAB page changes to load state, indicating that the user is waiting for the response requesting the URL address. The content of the page will change only when the response data is received and the document is submitted.

URL Request process

The URL and page resource URL request process requires the browser process to communicate with the network process and transfer it to the network process. The network process first checks whether the local cache matches the resource. If yes, it directly returns the resource. If no, it enters the network request process. If the request protocol is HTTPS, you also need to establish a TLS connection. After the TCP connection is established between the IP address and the server, the browser constructs the request line, request information and other information, and attaches the Cookie data related to the domain name to the request header, and then sends the constructed request information to the server. After receiving the request information, the server generates response data (including response line, response header, and response body) based on the request information and sends it to the network process. After the network process receives the response line and header, it parses the contents of the header. The returned data is processed according to the response header status code 200 and the content-Type field (for example, if the status code is 301 or 302, the connection is redirected). In addition, the content-Type field is a very important field in the HTTP header, which tells the browser what Type of response body data the server returns. The browser then determines how to display the Content of the response body based on the value of the Content-Type.

Prepare the render process

In general, the rendering process strategy used by browsers to open a new page is:

  • Typically, a separate rendering process is used to open a new page;
  • If page B is displayed from page A, both A and B belong to page BThe same site(same protocol and root domain), then B page reuse A page render process; In other cases, the browser process creates a new renderer for B.
Submit the document

Note that the “document” here refers to the response body data for the URL request

  • The “submit document” message is sent by the browser process, and the renderer process receives the “submit document” message and establishes a relationship with the network process
  • A “pipeline” for transmitting 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, URL in the address bar, 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 takes a while to reload.

Rendering phase

Once the document is submitted, the rendering process begins to parse the page and load the subresources.

Stay tuned for the next study note, The Rendering Flow of browser Pages.

reference

Geek Time course “How Browsers Work and Practice”