This is the 17th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Enter the URL to the page to show what’s going on here

Armed with the previous knowledge of browser multi-process architecture and web requests, we began to analyze what happens between entering the URL and presenting the page.

  • 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 network process, the browser process sends a “CommitNavigation” 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.
    • When the commitNavigationEnd event is fired, the commit navigation process ends, the old document has been pageHide
  • 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.
  • After the browser process receives a “submit document” message from the renderer, it updates the page state in the browser process, begins parsing the response data, and the navigation ends. This is when the replacement begins, notifying the renderer process to parse the document and update the Web page.
  • Among them, the user sends a URL request to the page to start the process of parsing, called navigation.

Process in the first step, the browser receives the user to enter the URL of the request, the current page will be replaced with a new page, but in the process to the browser will URL forwarding network process, before the browser also provides beforeunload hooks, the user can cancel the navigation within this hook, even if the user does not have to write this hook, Then the hook will still be executed to do some cleanup. That is, before navigation, the browser thread triggers an unload event for the current page and the collection needs to free up memory, which takes some time, but the bulk is returned when a new URL is requested.

When there is no beforeunload hook, or users can navigate beforeunload hooks, then we go to the next step:

What is submitting a document? It will be explained below.

Next, you enter the page resource request process. In this case, the browser process sends the URL request to the network process through interprocess communication (IPC). After receiving the URL request, the network process initiates the actual URL request process here.

The network process requests we made clear above

Network process looks for caching, caching with directly, not send as DNS cache, access to the server IP address, if it is HTTPS, to establish the SSL connection, and then use the IP address and port number in the TCP connection, the connection is established successfully, the browser will through the HTTP protocol to build request headers, request body, request, the server for processing, When the server finishes processing, it returns the response line, response header, and response body. Build the request, find the cache, prepare the IP and port, wait for the TCP queue, establish a TCP connection, initiate an HTTP request, the server processes the request, the server returns the request, and disconnect.

Suppose the server returns a 200 status code

Now the browser has to deal with the response, so how does the browser distinguish between response types? For example, if some types are HTML files that need to be rendered to the page and others are download types that need to be downloaded, the browser will use the content-Type value in the response header to determine what to do with the Content in the response body.

If the content-Type value is application/octet-stream and the display data is byte stream, the browser will normally handle the request according to the download Type. Note that if the content-type is incorrectly configured on the server, such as setting the text/ HTML Type to application/octet-stream, the browser may misinterpret the file’s Content, for example, by turning a page intended for presentation, It becomes a download file. Therefore, the subsequent processing flow of different Content-Types is quite different. If the value of the Content-Type field is determined by the browser to be a download Type, the request is submitted to the browser’s download manager and the navigation of the URL request ends. But if it’s HTML, the browser will continue with the navigation process. Since Chrome’s page rendering runs in the render process, the next step is to prepare the render process.

Next we need to prepare the rendering 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, there are some exceptions, in some cases the browser will allow multiple pages to run directly in the same render process.

Chrome’s default strategy is one render process per TAB. 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. Officially, this default policy is called process-per-site-instance.

To summarize, the renderer strategy used to open a new page is: usually, a separate renderer is used to open a new page; If page B is opened from page A, and A and B belong to the same site, then page B reuses the rendering process of page A; If otherwise, the browser process creates a new renderer for B. Once the renderer process is ready, it cannot immediately enter the document parsing state because the document data is still in the network process and has not been submitted to the renderer process, so the next step is to submit the document

After receiving the confirm message, the browser process updates the browser interface status

At this point, the navigation between the user’s URL request and the page’s parsing is complete. Now comes the rendering phase.

Once the document is committed (that is, after the browser process receives a “submit confirmation” message), the renderer process begins page parsing and child resource loading.

When the page is generated and the child resources are loaded, the renderer sends a message to the browser process, which receives the message and stops the loading animation on the TAB (the location occupied by The Favia.icon)

conclusion

  1. The server can control browser behavior based on the response header, such as redirection, setCookie, and download.
  2. The browser navigates through all of the intermediate stages, from the user initiating the request to submitting the document to the rendering process.

The navigation process is important. It serves as a bridge between the network loading process and the rendering process. If you understand the navigation flow, you can connect the display flow of the entire page.

QA:

<a target="_blank" rel="noopener noreferrer" class="hover" href="https://linkmarket.aliyun.com/hardware_store?spm=a2c3t.11219538.iot-navBar.62.4b5a51e7u2sXtw" data-spm-anchor-id="a2c3t.11219538.iot-navBar.62">The hardware store</a>  
Copy the code

Using the Noopener noreferrer tells the browser that the newly opened child window does not need to access any of the parent window’s content, which prevents some phishing sites from stealing the parent window’s information. When the browser opens a new page and parses it to contain the Noopener noreferrer, it knows that they do not need to share the page content, so at this time the browser will let the new link open in a new page.