Steps from entering a URL from the browser address bar to displaying the page (using HTTP as an example)

1. Enter the URL in the address box of the browser.

2. The browser resolves the URL acquisition protocol, host, port, and path of the requested resource. The address bar determines whether the keyword entered is the search content or the requested URL. If the protocol or host name in the ENTERED URL is invalid, the content entered in the address bar will be passed to the search engine. If there is no problem, the browser checks for illegal characters in the URL and escapes them if there are.

2.1 Why should URLS be parsed (that is, encoded)? A: Because web standards stipulate that urls can only be letters and numbers, as well as some other special characters. * '(); : @ & = + $, /? Key =value HTTP :www.baidu.com? Key =value HTTP :www.baidu.com? Key =value You don't know if = is the symbol that connects the key and value, or if = is in the key itself. Q: Rules for URL encoding? A: Different operating systems, different browsers, and different web character sets will result in completely different encoding results. Case 1: Url path contains Chinese characters (http://zh.wikipedia.org/wiki/) during the Spring Festival "spring" and "section" utf-8 "E6 98 A5" and "E8 8 a 82", IE found on actual query url is "http://zh.wikipedia.org/wiki/%E6%98%A5%E8%8A%82", namely according to the order, first add % in each word. Case 2: The query string contains Chinese characters. The encoding of the query string is the default encoding of the operating system. "Spring Festival" is changed to GB2312 code "B4 BA BD DA". IE found on actual query url is "http://zh.wikipedia.org/wiki/B4 BA DA" BD, Firefox is BD BA B4 "% % % % DA", is also GB2312 encoding, but on every word first added %. Case 3: The URL generated by the Get method contains Chinese characters. The code for the GET and POST methods is the code for the web page. Case 4: The URL of the Ajax call contains Chinese characters. In Ajax calls, IE always uses GB2312 encoding (the default encoding for the operating system), while Firefox always uses UTF-8 encoding. 2.2 How to solve different URL coding rules? A: Use Javascript to encode the URL before submitting it to the server. EncodeURI escapes the entire URI, converting illegal characters in the URI to legal characters, so characters that have special meaning in the URI are not escaped. EncodeURIComponent escapes URI components, so special characters are also escaped, such as the punctuation mark separating URI components :; /? @&=+$,# escape and encodeURI have the same effect, but they are different for unicode encoding characters other than 0xFF, where %u is directly prepended to the character's Unicode encoding. EncodeURI first converts characters to UTF-8 format and prefixes each stanza with %.Copy the code

3. The browser checks whether the requested resource is in the cache. If the requested resource is in the cache and is not invalid, the browser uses it directly. (Browser’s strong caching policy)

4. The browser obtains the IP address of the destination host through DNS resolution.

If yes, the destination host IP address is returned. If no, the destination host IP address is returned. Browser cache => local system cache (Whether the hosts file of the system has records) This place has been hacked, called domain name hijacking) => router cache => ISP's DNS cache. The local DNS server iteratively queries the IP addresses of other DNS servers to the root DNS server. The root DNS server returns the IP address list of the top-level DNS server. Make a request to one of the TOP-LEVEL DNS servers, which returns a list of secondary DNS IP addresses. Make a request to one of the "secondary DNS servers", which return a list of IP addresses corresponding to "host name".Copy the code

5.ARP address resolution obtains the MAC address of the destination host.

6. The browser assembles an HTTP request packet.

7.TCP three-way handshake for establishing a connection. If HTTPS is used, there is a TLS four-way handshake before communication.

8. After the TCP connection is established, the HTTP request is sent. The server arrives at the application layer (Http), transport layer (TCP three-way handshake connection), network layer (IP and ARP), and data link layer (network).

9. When processing the request, the server checks whether the HTTP request header contains the cache authentication information. If the request resource is in the cache and is fresh enough, the HTTP response packet containing the status code 304 does not contain the resource. Otherwise, the HTTP response packet returned after processing the complete request contains resources.

10. The browser receives the HTTP response and checks whether the response status code is 304,304. (Browser’s negotiated cache policy)

11. If the value is 200 and the resource can be cached, the browser caches the resource.

12. Then render in the browser.

(1) DOM tree construction: first parse the received document, according to the definition of the document, parse the HTML document from top to bottom, and build the DOM tree, which is composed of DOM elements and attribute nodes. (2) Build CSSOM(CSS Object Model) tree: load and parse CSS stylesheets to generate CSSOM rule tree. (3) In the process of parsing encountered pictures, stylesheets, JS files, start the download. (4) Build render tree: Build render tree according to DOM tree and CSSOM rule tree. The nodes of the render tree are called render objects, which are rectangles containing visual attributes such as color and size. Render objects correspond to DOM elements, but this correspondence is not one-to-one. Invisible DOM elements are not inserted into the render tree. There are also DOM elements that correspond to several visible objects, which are typically elements with complex structures that cannot be described by a rectangle. When rendering objects are created and added to the tree, they have no position or size, so when the browser generates the render tree, it will be laid out according to the render tree (also known as backflow). All the browser has to do at this stage is figure out the exact location and size of each node on the page. This behavior is often referred to as "automatic reordering." (6) Painting: Traverse the render tree and call the paint method of the render objects to display their contents on the screen, painted using the UI base components.Copy the code

13.TCP disconnects four times.