From input URL to page presentation

From input URL Show to page , What happened? ？

The whole process needs the cooperation between various processes ：

• The browser process is mainly responsible for user interaction 、 Subprocess management and file storage .
• Network process provides network download function for rendering process and browser process .
• The main responsibility of the rendering process is to download HTML、JavaScript、CSS、 Pictures and other resources are parsed 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 Will make the rendering process run in a safe sandbox , Just to ensure the safety of the system .

From input URL The process of page display can be roughly described as follows ：

1. Users from the browser process Enter the request information ;
2. Network process launch URL request ;
3. Server response URL After the request , The browser process starts Prepare the rendering process ;
4. When the rendering process is ready , You need to submit the page data to the rendering process first , be called Submit documents Stage ;
5. After the rendering process receives the document information , Start Parsing pages and loading sub resources , Finish rendering the page .

From input URL Show to page

1. User input

The key word entered in the address bar is Search content , still Requested URL.

• If it's search content , The address bar will use the browser's default search engine , To synthesize new search keywords URL;
• If it is judged that the input content is consistent with URL The rules , The address bar will add this paragraph to the agreement according to the rules , To synthesize into a complete URL.

2. URL Request process

Next, we enter the page resource request process . Browser process through Interprocess communication （IPC） hold URL Request sent to network process , Network process received URL After the request , Will initiate real URL Request flow .
Specific process ： The network process looks for whether the resource is cached locally . If there are cache resources , Directly return resources to the browser process ; If the resource is not found in the cache , Then go directly to the network request process . The first step before this request is to DNS analysis , To get the server requesting the domain name IP Address . If the request agreement is HTTPS, Then we need to build TLS Connect .

utilize IP Address and server establishment TCP link . Browser side build request line 、 Request header 、 Domain name related Cookie Wait for data to be attached to Request header , Then send the request to the server .

Request received by server , Generating response data （ Include response lines 、 Response header and response body ）, And send it to the network process . After the network process receives the response data , Start parsing the content of the response header .

（1） Redirect
If you find that the returned status code is 301 perhaps 302, It indicates that the server needs the browser to redirect to other URL. The network process will start from the response header Location Field to read the redirection address , Relaunch HTTP perhaps HTTPS request .

（2） Response data type processing
Content-Type: Tell the browser what type of response body data the server returns
If it's a download type , Then the request will be submitted to the browser's download manager , At the same time URL The navigation flow of the request ends .
If it is HTML, Continue the navigation process .

3. Prepare the rendering process

Chrome The default strategy of is that each label corresponds to a rendering process . But if you open a new page from one page , And the new page and the current page belong to the same site , Then the new page will reuse the rendering process of the parent page . The government calls this default strategy process-per-site-instance

4. Submit documents

“ file ” refer to URL Requested response body data .
“ Submit documents ” Is sent by the browser process , The rendering process received “ Submit documents ” After the news , Will establish data transfer with network process “ The Conduit ” .
After the document data transmission is completed , The rendering process will return “ Confirm the submission ” Message to browser process .
The browser process is receiving “ Confirm the submission ” After the news , Meeting Update browser interface status , Including security status 、 Address bar URL、 The historical state of advance and retreat , And update the Web page .

5. Rendering phase

Once the document is submitted , The rendering process starts page parsing and sub resource loading .

summary

• The server can control the behavior of the browser according to the response header , Such as jump 、 Network data type judgment .
• Chrome By default, each label corresponds to a rendering process , But if two pages belong to the same site , These two tags will use the same rendering process .
• The navigation process of the browser covers all the stages from the user initiating the request to submitting the document to the rendering process .