This is the 12th day of my participation in Gwen Challenge

preface

What happens when you type the URL into the browser to display the page?

This is a classic topic, learned li Bing big guy browser working principle, sorted out a study notes.

Navigation process

The user sends a URL request to the page to start the process of parsing, called the navigation process.

The browser process receives the URL request from the user and forwards the URL to the network process

The user entered the URL/ query keyword

The browser generates a complete URL based on the query keyword or URL in the navigation bar.

The search bar of modern browsers has a built-in search engine. When a user enters a search keyword (that is, it does not conform to THE URL rules), the URL with the search keyword will be synthesized according to the default search engine of the browser set by the user.

Github will synthesize the URL with the query keyword based on the browser's default search engine.
https://www.baidu.com/s?ie=UTF-8&wd=github
Copy the code

If a user enters a URL that complies with the URL rule, the browser tries to synthesize a complete URL based on the URL rule

Enter the content that matches the URL rule -github.com
# Because the protocol header is missing, the browser will try to complete the protocol header for it and synthesize it into the full URL
https://github.com
Enter the content that conforms to the URL rule -https://www.qq.com/
Since it is a complete URL itself, the browser does not do any URL manipulation
https://www.qq.com/
Copy the code

Determine beforeUnload events

Before the current page is replaced with a new page, the page is determined to have beforeUnload events. Beforeunload events are often used to do the following:

  • Some data cleanup before the page exits
  • Ask the user whether to leave the current page
  • The navigation is cancelled and the subsequent navigation process is not performed
window.addEventListener('beforeunload'.(event) = > {
  // According to the specification, to display the acknowledgement, the event handler needs to call preventDefault() on the event.
  event.preventDefault();
  // Chrome does not comply with this rule. Chrome requires returnValue to be set
  event.returnValue = ' ';
});
Copy the code

If the page does not listen to the beforeUnload event, or if the event has agreed to continue the navigation process, the browser enters the loaded state (the browser icon enters the loaded state) for the subsequent navigation process.

Making a URL request

Initiate a real URL request in a network process.

If the browser caches the resource locally, it forwards the data directly to the browser process; otherwise, the network process receives and parses the response header data and forwards the data to the browser process.

The URL is forwarded to the network process

When this is done, the browser process forwards the URL request to the network process via **IPC(interprocess communication)**, and the network process initiates the actual URL request process upon receiving the request.

Find the local resource cache

The network process first checks to see if the resource is cached locally, and if so, returns the resource directly to the browser process.

Enter the network request process

If no cache resource is found, the network request process is entered.

The DNS

Check whether the DNS cache exists based on the URL and is within the validity period. If yes, the IP address of the server storing the cache is displayed.

If no matching DNS cache exists, the SERVER is parsed by the DNS server to obtain the SERVER IP address. If HTTPS is used, you need to establish a TLS connection.

Establishing a TCP Connection

TCP connections are established using IP addresses and port numbers (HTTP port 80 by default, HTTPS port 443 by default) (a maximum of six TCP connections can be established at the same domain name, and the requests exceeding the number of connections need to be queued). Then, the browser will construct the request line, request header (including Cookie data), request body and other information. Send a request message to the server.

After receiving the information, the server will generate response information such as response line, response header and response body according to the request information and send it to the network process.

After receiving this information, the network process begins parsing the response information.

Process requests based on status codes

If the status code of the response header returned by the server is 301 or 302

  • 301: Permanent redirection, usually used to redirect removed resources
  • 302: Temporary redirect, used for temporary redirection

The Location field in the response header reads the new redirected URL and initiates a new HTTP or HTTPS request, and the process starts all over again.

If the status code of the response header returned by the server is 200(normal response), the server determines how to display the Content of the response body based on the content-Type returned by the server.

Tell the browser to return data in HTML format
Content-Type: text/html
Tell the browser that the data returned is byte stream type, usually the browser will install download type to handle it
Content-Type: application/octet-stream
Copy the code

If it is download-type data, the browser submits it to the browser’s download manager, at which point the navigation process ends.

If it is HTML, the browser continues with the navigation process.

Prepare the render process

By default, Chrome assigns a render process to each page (a new render process is created for each new page opened).

However, in the case of the same site, multiple pages will reuse the same rendering process, Chrome officially called the default policy of process-per-site-instance.

Same-site

If all the following conditions are met, a unified site is displayed

  • Same root domain name
  • The agreement is the same

The same domain name condition only determines the root domain name and protocol. Therefore, the definition of the same site also includes all subdomain names and different ports under the root domain name.

# These cases all belong to the same site
https://www.github.com
https://api.github.com
https://www.github.com:8081
Copy the code

Submit the document

  • When the browser process receives the web process’s response header data, it sends a “submit document” message to the renderer process.

  • When the renderer receives the “submit document” message, it establishes a “pipeline” with the network process to transfer data.

  • After the document data transfer is complete, the renderer process returns a “confirm submit” message to the browser process.

  • Process browser receives “confirm submitted after the news,” started before removing the old document, then update the browser interface state (including the safety status, the address bar’s URL, forward back the history of the state), and update the page (from a previous URL web request counterclockwise, will become a clockwise).

At this point, a complete navigation process is complete, and it’s time to start rendering.

Notes on the rendering process will be in the next article.