Enter the URL to the page rendering

Enter or enter the URL of the page to refresh the entire page flow out infection

1. DNS resolution
2. HTTP three-way handshake -> TCP / IP connection
3. Browser sends a request
4. The server returns the requested document (html)
5. Browser rendering

1. DNS resolve

1. Lookup Cache
   • Chrome search their own DNS cache to see if the domain name corresponding to the IP address（chrome://net-internals/#dns）
   • Chrome OS will search its own DNS cache (browser cache or no cache has been found invalid)
   • Read the local HOST file (operating system cache is not found) (mac: etc / host)
2. DNS is a browser initiates a system call (to the local master DNS server, normally provided by broadband operators, launched a domain name resolution request)
   • Broadband operators to view their own cache server, there is not expired.
   • Operator server instead of the browser initiates an iterative DNS resolution request (IP address baidu.com is the number? 1, look for DNS IP address of the root domain, 2, IP address top-level domain COM domains, 3, baidu.com domain the IP address) (at 123.com, for example, COM is the root domain, top-level domain 123.com is often mentioned, the main domain name can be understood as access to the domain name of your site, usually www.123.com )
   • Operator server returns the results to the operating system kernel cache at the same time since
   • The operating system kernel the results back to the browser
   • The final browser to get the corresponding IP address www.imooc.com

2. HTTP three-way handshake -> TCP / IP connection

1. After the browser to obtain the domain name corresponding to the IP address, initiate HTTP "three-way handshake"
   • Browser to a random port, TCP connection request to the web server program
   • The application layer may send the data to the transport layer, and then sent to the network layer. IP protocol in the network layer will determine the IP address, and transfer data indicating how to jump router. Then the packet will then be encapsulated into a data frame structure in the data link layer, the physical dimension is the final transmission
   • TCP connection request through the layers of routing equipment, after reaching the server side first into the card, and then enter the kernel TCP / IP protocol stack, after filtering firewall, and finally reach the server, establish a TCP / IP connection
   • Data before entering the service side, may also be responsible for first through load balancing server, its role is to request a reasonable distribution to multiple servers

3. The browser sends a request

1. TCP / IP after the connection is established, the browser may send HTTP requests using the server. (Example: requesting a root of a domain with a GET method of HTTP protocol, a protocol HTTP 1.0 protocol may be used)
   • Each time you start the browser request, the browser cache will now look for the result of the request and the identity
   • If no cache and cache the results of identification requests, it will initiate HTTP requests
   • If the cache result of this request fails, only the cache ID, you can identify the resources to carry cache, an HTTP request, if the negotiation cache entry into force, the return 304
   • If there is a request of the cached results, and does not fail, the process directly returns. (Compulsory cache size can be viewed in the network, representing the location of the cache storage. from memory cacheMemory cache [picture, js], from disk cachethe hard disk cache [css])

4. The server returns the requested document (html)

1. The request by the server side, according to the path parameters after some processing through the rear end of the data of a processed result returned to the browser.
   • Header and returns the HTTP server sends the result of the request into the cache rule HTTP response packet to the browser, the cache control fields are mandatory Expiresand Cache-Controlcontrol the cache fields are negotiated Last-Modified/if-Modified-SinceandEtag/if-None-Match
   • Every time the browser will get the results returned by the request and the result is stored in the browser cache identifier cache.

The browser rendering

1. The browser to get the HTML page code returned by the server, in this page parsing and rendering time, which the JS / CSS, images static resources, they are also the HTTP requests need to go through the steps above.
2. Browser page rendering according to get the resources, eventually showing a full page to the user.
   • HTML parser: construct a DOM tree based on HTML.
   • CSS parser: construct tree CSSOM according to CSS.
   • If you encounter a script tag, it will determine whether there is async or defer, the former will be downloaded and executed in parallel JS, which will first download the file, then wait for the completion of the analysis execution order HTML. If none of the above, it will stay blocked until the rendering process is completed JS execution. Meet the downloaded file will go to download files, download here if the efficiency of the use of HTTP / 2 protocol, then will greatly improve the multi-graph.
   • Attachment: After CSSOM tree and DOM tree construction is completed will start generating Render tree.
   • Layout: Layout. Determine page elements layout, style, and so many aspects of things.
   • GPU painting: pixel rendering the page, the content is displayed on the screen.