1. Parse the URL
________________________________________________________________________
About URL:
URL (Universal Resource Locator): Uniform Resource Locator. Commonly known as a web address or web address.
URL is used to represent the address of a resource. (It can be seen by the common name)
The URL mainly consists of the following parts:
a. Transfer Protocol
b. Server
c. Domain name
d. port
e. Virtual directory
f. file name
g. Anchor
h. Parameters
That is, usually a URL is like the following
The link is: http://www.aspxfans.com:8080/news/index.asp?boardID=5&ID=24618&page=1#name
There are several points to note in the above link: the use of ";" and "/", port 80 is not displayed by default, parameters are followed between "?" and "#", multiple parameters are connected by "&", "#" " followed by the anchor.
___________________________________________________________________________________________________________________________________________________________________
Now let's discuss URL parsing. When the URL is entered in the browser, the browser first identifies the obtained URL and extracts the domain name field.
2. DNS resolution
DNS resolution (domain name resolution), DNS is actually a database corresponding to domain names and IPs.
IP addresses are often difficult to remember, but machines only recognize each other's IP addresses, so people invented domain names to make one-to-one correspondence between domain names and IP addresses. The conversion between them is called domain name resolution, and domain name resolution requires specialized The whole process is automatic.
You can enter the IP address in the browser to browse the website, or enter the domain name to query the website. Although the obtained content is the same, the calling process is different. Entering the IP address directly calls the content from the host, and entering the domain name is through domain name resolution. The server points to the IP address of the corresponding host, and then calls the content of the website from the host.
When DNS resolution is performed, the following steps will be experienced:
Query the browser cache (the browser will cache the DNS obtained before for 2-30 minutes), if not found,
Check the system cache , check the hosts file, this file holds the domain name and IP data of some previously visited websites. It's like a local database. If found, you can directly obtain the IP address of the target host. If not found, need
Check the router cache , the router has its own DNS cache, which may include the content of the query; if not, ask
Query ISP DNS cache: ISP service provider DNS cache ( local server cache ) may have relevant content there, if not, need,
Recursive query : Search from the root domain name server to the top-level domain name server to the extreme domain name server in turn to search for the IP corresponding to the target domain name.
Through the above search, you can get the IP corresponding to the domain name. The next step is to initiate a TCP connection to the HTTP server located at the IP address.
3. The browser establishes a TCP connection with the website (three-way handshake)
The first handshake: the client sends a request to the server (SYN=1) and waits for the server to confirm;
The second handshake: the server receives the request and confirms it, and replies with an instruction (SYN=1, ACK=1);
The third handshake: The client receives the reply command from the server and returns an acknowledgment (ACK=1).
Through the three-way handshake, the connection between the client and the server is established, and data can now be requested and transmitted.
4. Request and transfer data
For example, to access "http://www.dydh.org/" through a get request, you can see by capturing packets:
Request URL (url): http://www.dydh.org/
Request method: GET
Remote address: IP
Status code: 200 OK
Http version: HTTP/1.1
Request headers: ...
Response headers: ...
Note that there is one in the response header: Set-Cookie: "PHPSESSID=c882giens9f7d3oglcakhrl994; path=/", indicating that there is no cookie information about this website in the browser.
The next time we visit the same site:
As you can see, the request header contains this cookie information,
Cookie:"PHPSESSID=c882giens9f7d3oglcakhrl994; CNZZDATA1253283365=1870471808-1473694656-%7C1473694656"
Cookies can be used to save some useful information: if cookies are accessed for the first time, the server will be prompted to create user cache information. If not, you can use the corresponding key value of cookies to find the corresponding cache. The cache stores usernames, passwords and some user settings. item.
Through this GET request, and the server's response. The target file on the server can be transferred to the browser for rendering.
5. The browser renders the page
The client gets the file transmitted from the server, finds the HTML and MIME files, and through the MIME file, the browser knows to use the page rendering engine to process the HTML file.
a. The browser parses the html source code and creates a DOM tree.
In the DOM tree, each HTML tag has a corresponding node, and each text will also have a corresponding text node.
b. The browser parses the CSS code, calculates the final style data, and forms the CSS object model CSSOM.
First, the illegal CSS code will be ignored, and then it will be rendered in the order of browser default settings - user settings - external link styles - inline styles - HTML styles.
c. Build a rendering tree using DOM and CSSOM.
Render trees are similar to DOM trees, but there are differences.
The DOM tree corresponds exactly to the html tags, but the rendering tree ignores elements that do not need to be rendered, such as head, display:none elements, etc.
And each line in a chunk of text is a separate node in the render tree.
Each node in the render tree stores a corresponding css property.
d. The browser draws the page directly to the screen according to the rendering tree.
————————————————————————————————————————————————————————————————————————————————————
Reference link:
https://www.zhihu.com/question/34873227
http://blog.csdn.net/qq991029781/article/details/50938475
http://blog.csdn.net/lihongxun945/article/details/37830667
http://www.myexception.cn/go/1860953.html
http://www.nowcoder.com/discuss/3853?pos=264&type=1&order=0
http://www.cnblogs.com/xiaohuochai/p/4750444.html