1.URL
url: Uniform resource locator, each file on the Internet has a unique URL, in layman's terms, it is the address of the webpage we see every day. Our common URL is like this: www.baidu.com . This domain name consists of three parts: protocol name, domain name, and port number. The port here is hidden by default. In addition, the URL will also contain some paths, queries or other fragments, for example: baike.baidu.com/search?word…
Our most common protocol is the HTTP protocol, in addition to the encrypted HTTPS protocol, FTP protocol and so on. The middle part of the URL is the domain name or IP, followed by the port number.
Usually the port number is not common because most of them use the default port, such as HTTP default port 80, HTTPS default port 443.
The standard format for a Uniform Resource Locator is as follows:
Protocol type: //server address [: port number] file name ? query
Take the following as an example:
baike.baidu.com:80/item/url/11…
- 1. https is the protocol
- 2. Hierarchical URL mark symbol ([//], fixed)
- 3. baike.baidu.com is the server address (usually a domain name, sometimes an IP address)
- 4. 80 is the port
-
- /item/url/110640 is the path
-
- ?fr=aladdin is the query parameter
-
- #19 is the anchor point
2.DNS conversion
First of all, we should know that the domain name entered in the address bar is not the real location of the final resource, and the domain name is just a mapping with the IP address. There are so many IP addresses of network servers, it is impossible for us to remember a series of numbers, so the domain name is generated, and the process of domain name resolution is actually the process of restoring the domain name to the IP address.
There are two methods of DNS domain name resolution, namely iterative query and recursive query
DNS domain name resolution (domain name resolution), DNS is actually a database corresponding to domain names and IPs.
IP addresses are often hard to remember, but machines only recognize each other’s IP addresses, so people invented domain names to allow one-to-one correspondence between domain names and IP addresses. The conversion work between them is called domain name resolution, and domain name resolution requires a dedicated The domain name resolution server to complete, the whole process is automatic.
First, the browser checks whether the local hosts file has this URL mapping relationship, and if so, invokes this IP address mapping to complete domain name resolution.
If not found, the local DNS resolver cache will be looked up, and if found, it will be returned.
If it is still not found, it will look up the local DNS server, and return if it is found.
Finally, iterate the query, according to the root domain server library (.com,.cn,.vip,.top…) -> top-level domain (.com), and then according to the top-level domain (.com) -> second-level domain subdomain (baidu .com), and finally find the corresponding IP according to the domain name of baidu.com, and return it to the browser.
3. Establish a TCP connection based on IP (three-way handshake).
three handshake
The HTTP request is divided into three parts: TCP three-way handshake, http request response information, and closing the TCP connection.
Before the client sends data, a TCP three-way handshake is initiated to synchronize the serial numbers and confirmation numbers of the client and server, and to exchange TCP window size information.
first
The first handshake: When the connection is established, the client (browser) sends a syn packet (syn=j) to the server, and enters the SYN_SENT state, waiting for the server to confirm; (Browser: I want to connect you) SYN: Synchronization sequence number (Synchronize Sequence Numbers).
the second time
The second handshake: the server receives the syn packet, must confirm the customer's SYN (ack=j+1), and at the same time send a SYN packet (syn=k), that is, the SYN+ACK packet, and the server enters the SYN_RECV state at this time; (The server receives the request and replies: agree to your connection)
the third time
The third handshake: the client (browser) receives the SYN+ACK packet from the server and sends a confirmation packet ACK (ack=k+1) to the server. After the packet is sent, the client and server enter ESTABLISHED (TCP connection is successful) state, complete the three-way handshake. (Browser reply: received your reply,)
After the three-way handshake is over, the HTTP request message is sent.
4. HTTP initiates a request.
A complete HTTP request includes three parts: request start line, request body and request header.
The content of the request is as follows:
The HTTP/1.1 protocol defines eight methods (also called "actions") GET, POST, PUT, DELETE, PATCH, HEAD, OPTIONS, and TRACE. Among them, the more commonly used methods are GET, POST, and PUT;
After the request, you should get a response, unless the network is disconnected, or the server is down. Next, the server starts to process the request and returns the HTTP message.
5. The server processes the request
Each server will install an application to process the request - web server (common web server products include apache, nginx, IIS or Lighttpd, etc.).
The web server plays the role of management and control. For the requests sent by different users, it will combine the configuration files to entrust different requests to the programs on the server that process the corresponding requests (such as CGI scripts, JSP scripts, servlets, ASP scripts, server-side JavaScript, Or some other server-side technology, etc.), and then return the result of background program processing as a response.
5. Website background processing stage
Website processing is the actual background processing work. There are many frameworks for background development, but most of them are built according to the MVC design pattern.
MVC is an acronym for three words, they are Model (model), View (view) and Controller (control).
This model believes that programs, no matter how simple or complex, can be divided into three layers from a structural point of view.
1) The top layer is the "view layer" (View) that directly faces the end user. It is the operation interface provided to the user and the shell of the program.
2 ) The bottom layer is the core "data layer" (Model), which is the data or information that the program needs to operate. Of the three components of MVC, the model has the most processing tasks. A model can provide data for multiple views.
3) The middle layer is the "control layer" (Controller), which is responsible for selecting the data in the "data layer" according to the instructions input by the user from the "view layer", and then performing corresponding operations on it to produce the final result. The controller belongs to the manager role, receives the request from the view and decides which model component to call to process the request, and then determines which view to use to display the data returned by the model processing.
In summary, first the controller receives the user's request and decides which model should be called for processing, then the model uses business logic to process the user's request and returns data, and finally the controller uses the corresponding view format model to return the html string to The browser, which renders the web page to the user. The content of the corresponding message returned is as follows:
6. The browser parses and renders the page
After the browser receives the http data packet, it initiates a request to the server to download the resource, and then parses the process (involving: lexical analysis of html, then parses it into a DOm tree, parses css at the same time to generate a css rule tree, and merges it to generate a render tree. Then layout Layout, painting rendering, synthesis of composite layers, GPU drawing, external link processing, loaded and documentloaded, etc.). If the js file is being downloaded, the parser will stop parsing the html, which leads to the js blocking problem.
The HTML string result returned by the background processing will be read and parsed by the browser, which corresponds to the work of loading, parsing, and rendering the HTML page.
1. Load
The browser loads an html page from top to bottom, and performs parsing and rendering processing in parallel during the loading process. When encountering link tags, image tags, and script tags in this process, the browser will send a request to the server again to obtain css files, image resources, and js files, and execute the js code to load and analyze synchronously.
2. Analysis and rendering
The process of parsing is actually to generate a parse tree, that is, a dom tree. The dom tree is composed of dom elements and attribute nodes, plus style objects parsed by css and action implementations after parsing by js. Rendering is to visualize the DOM tree. The next step comes to the working stage of drawing web pages.
Sixth, draw the page The browser calculates the rendering tree through the above steps, which is a visual representation of the DOM tree. It builds the rendering tree so that the pages are drawn in the correct order, follows certain rendering rules, and after a series of rendering work, the website page is realized. Drawing, thus finally completing the page display.
7. Disconnect, TCP connection (wave four times).
When the data transmission is completed, the tcp connection needs to be disconnected. At this time, tcp is initiated to wave four times.
1. The TCP client sends a FIN to close the data transmission from the client to the server. (The browser initiates a notification that the request has been sent, you are ready to close)
2. When the server receives the FIN, it sends back an ACK, confirming that the serial number is the received serial number plus 1. Like SYN, a FIN will occupy a sequence number. (The server initiates a notification that the request has been received, you are ready to close)
3. The server closes the client connection and sends a FIN to the client. (The server initiates a notification, the response message has been sent, you are ready to close)
4. The client sends back an ACK message for confirmation, and sets the confirmation sequence number to the received sequence number plus 1. (The browser initiates a notification, I am going to close it, and you are going to close it too)
The above is basically the whole process of a page from inputting the URL to loading and displaying the page. Of course, it can be refined, but this knowledge is enough for the front end. Interested students can study it by themselves.