Table of contents
Review information and summarize
1. The whole process from entering the URL to loading the page
1. Enter the URL in the browser
6. The server responds to the request and returns the result
Check the information and summarize it (if there are any mistakes, you can leave a message to correct them)
What is the whole process from entering the URL to loading the page? Before understanding this problem, let's first understand the browser architecture level. The browser is a multi-process architecture. In the task manager (press Shift+Esc in the browser) We can see that there are browser main process, GPU process, network process, rendering process, storage process, etc. The communication between processes uses IPC to communicate. Each of these processes has different functions, such as:
The main browser process is mainly responsible for interface display, user interaction, and sub-process management. The rendering process is mainly responsible for converting HTML, CSS, and JS into pages. The GPU process is used for drawing, and the network process is used for loading network resources, etc. ..
The entire process from entering the URL to loading the page is mainly completed in the browser main process, network process, and rendering process.
1. The whole process from entering the URL to loading the page
1. Enter the URL in the browser
URL is the abbreviation of Uniform Resource Locator. It is a network address, commonly known as a website address, and is used to represent the address of a certain resource.
<协议>://<Main machine name>:查询character skewer><?<number of references>/;<Road diameter>/<End entrance><Single tier (锚)>
After the user inputs, the browser main process will first determine whether the user input is a URL or a keyword. If it is a URL, it will be handed over to our network process. If it is a keyword, our default search engine will be called to synthesize a search key. The URL of the word.
For example, when I search Baidu, the browser determines that this is a keyword, and will synthesize a URL with the keyword, such as the following picture:
Before synthesis
After synthesis
If it is the URL directly, the browser will first identify the URL and extract the domain name field, such as .baidu.com
Note: When the user presses the search key, it does not directly resolve the DNS and then initiate a request. Instead, it searches locally to see whether the resource is cached. If the resource is found, it will be The resource is returned to the browser. If it is not found, it enters our network request process
2. Find cache
The browser first checks the browser cache->system cache->routing cache to see if there is a URL page with this address. If there is, the content of the page will be displayed. If not, proceed to the next step.
in:
Browser cache means: the browser will record DNS for a period of time, so it is only the first place to resolve DNS requests
Operating system cache: If this record is not included in the browser cache, the system will call the operating system to obtain the operating system record (save the latest DNS query cache)
Router cache: When the above two steps cannot successfully obtain DNS records, the router cache will continue to be searched.
ISP cache: If the above fails, continue to search the ISP
Querying the system cache mainly queries the host file. This file mainly saves the domain name and IP data of previously visited URLs. It is like a local database. If it is found, the IP address of the local domain name can be obtained. If it is not found, the router cache will be performed.
3.DNS domain name resolution
If the cached resource is not found in the local search, the browser initiates a request to the DNS server, performs DNS resolution, and resolves the IP address corresponding to the domain name in the URL.
(DNS is actually a database corresponding to domain names and IPs. IP addresses are difficult to remember, and machines only know each other’s IP addresses. So people invented domain names to make domain names and IPs correspond one to one. The conversion work between them is called DNS. Domain name resolution. It should be noted that although the final results obtained by the two methods are the same, the calling methods are different. For example, the IP address calls the content directly from the host, and the domain name directly points to the IP address of the corresponding host through the domain name resolution server, and then calls the content from the host. The content of the calling URL)
DNS服务器是基于UDP的，因此会用到UDP协议。
4. Establish TCP connection
After parsing the IP address, establish a TCP connection with the server based on the IP address and the default port 80.
At this time, the browser will construct the request line, request headers, and cookies.
5. Initiate HTTP request
The browser initiates an HTTP request to read the file, and the request message is sent to the server as the third data of the TCP three-way handshake.
TCP three-way handshake: the first handshake is when the client sends a request to the server and waits for the server's confirmation. The second handshake is when the server receives the request and confirms and replies with a command. The third handshake is when the client returns a confirmation after receiving the server's command. .
6. The server responds to the request and returns the result
The server responds to the browser request and sends the corresponding html file to the browser
7. Close the TCP connection
Release the TCP connection by waving four times
8. Browser rendering
The client (browser) parses the HTML content and renders it. The parsing process after the browser receives the data packet is:
Build a DOM tree: Lexical analysis and then parsing into a DOM tree (dom tree), which is composed of dom elements and attribute nodes. The root of the tree is the document object
Build CSS rule tree: Generate CSS rule tree (CSS Rule Tree)
Build render tree: The web browser combines DOM and CSSOM and builds a render tree (render tree)
Layout: Calculate the position of each node on the screen
Painting: Traverse the render tree and draw each node using the UI backend layer.
The difference between the rendering tree and the DOM tree is that the DOM tree corresponds completely to the html tag. The rendering tree will ignore unnecessary elements, such as head or display:none. (Note: visibility: hidden elements will appear in the rendering tree. ) and each line in a large section of text is an independent node in the rendering tree, and each node in the rendering tree has css attributes.
9.JS engine parsing process
Call the JS engine to execute JS code (JS interpretation phase, preprocessing phase, execution phase to generate execution context, VO, scope chain, recycling mechanism, etc.)
Create a window object: The window object is also called the global execution environment. It is created when the page is generated. All global variables and functions belong to the properties and methods of the window, and the DOM Tree will also be mapped to the document object of the window. When the web page is closed or the browser is closed, the global execution environment will be destroyed.
Load the file: Complete the js engine to analyze whether its grammar and lexicon are legal. If it is legal, it will enter pre-compilation.
Precompilation: During the precompilation process, the browser will look for the global variable declaration, add it to the window object as a property of window, and assign the variable a value of 'undefined'; look for the global function declaration, and add it to the window object. It is added to the window object as a method of window, and the function body is assigned to it (the anonymous function does not participate in precompilation because it is a variable). The unreasonable aspects of variable promotion have been solved in ES6, but function promotion still exists.
Explanation and execution: When executing, a variable is assigned a value. If the variable is not defined, it is assigned a value directly without being precompiled. In ES5 non-strict mode, this variable will become an attribute of the window, that is, it will become a global variable. Values such as string and int place the value directly in the storage space of the variable, and the object object points the pointer to the storage space of the variable. When a function is executed, the function's environment is pushed into an environment stack. After the execution is completed, it is popped up and control is returned to the previous environment. JS scope is actually implemented by such an execution flow mechanism.