What happens when you enter a URL in a browser

In the process of learning the front end, you often see the question: What happens when you enter a URL in a browser. The following is a summary of the individual learning process, for individuals to review the use, if there is an incorrect or insufficient understanding of the place I hope you point out.
Let's start with a brain chart:

What happens when you enter a URL in a browser

I have divided the process into the following six steps: 1. DNS domain name resolution in the browser DNS cache search in the operating system DNS cache to search the system hosts file to find out if there is a corresponding IP to the local configuration of the preferred DNS server to initiate the domain name resolution request 2. Establish a TCP connection

In order to transmit data accurately, the TCP protocol adopts three-time handshake strategy. The sending side first sends a packet with a SYN (synchronize) flag to the receiver, and after receiving it, a packet with the Syn/ack (acknowledegment) flag is sent back in order to convey a confirmation message. Finally, the sender sends back a packet with an ACK flag, which represents the end of the handshake. In this process, TCP sends the same packet again if there is a problem interruption.
TCP is an end-to-end, reliable connection-oriented protocol, so HTTP is based on the Transport Layer TCP protocol without worrying about the various problems of data transmission. 3. Initiating an HTTP request

Request method: Get: Get resource POST: Transport entity Principal HEAD: Get message header PUT: Transfer file Delete: Delete file options: Ask for supported methods

Trace: Trace Path

Request message:

Request Message 4. Accept Response Results

Status code: 1**: Informational Status Code 2**: Success Status Code
200:ok Request Normal Processing
204:no content request processing succeeds, but no resources can be returned
206:partial content Request for a part of a resource 3**: Redirect Status code
301:moved permanently Permanent redirect
302:found Temporary redirection
304:not read 4** in Modified cache: Client Error status code
There is a syntax error in 400:bad request message
401:unauthorized requires authentication information that is authenticated by HTTP
403:forbidden access is denied
404:not found unable to find request resource

5**: Server Error status code
500:internal Server error is executing at server side
503:service unavailable server is under load or is undergoing downtime maintenance

Response message:

Response message 5. Browser parsing HTML

The browser parses the HTML file sequentially, constructs the DOM tree, when parsing to the external CSS and the JS file, initiates the request download resources to the server, if downloads the CSS file, the parser will continue to parse after the download the HTML to build the DOM tree, when downloading the JS file and executes it, The parser stops parsing the HTML. There is a JS blocking problem.
preloader :
When the browser is blocked by a script file, the Preloader (a lightweight parser) will continue to parse the following HTML to find the resources that need to be downloaded. If you find a resource that needs to be downloaded, the preloader begins to receive these resources. The preloader can only retrieve URLs in HTML tags and cannot detect URLs added using scripts, which are not available until script code executes.
Note: Pre-parsing does not change the DOM tree, which leaves this work to the main parsing process

The browser parses the CSS to form the Cssom tree, and when the DOM tree is built, the browser engine constructs the render tree from the DOM tree and the Cssom tree. The rendering tree contains style information for visual nodes (invisible nodes will not be added to the render tree, such as: Head element and element with display value none)

It is important to note that this process is done incrementally, for a better user experience, the rendering engine will render the content to the screen as early as possible, and will not wait until all the HTML is resolved before building and laying out the render tree. It shows part of the content as part of parsing, and may also be downloading the rest of the content over the network. 6. Browser layout render layout: This is a recursive process by calculating the exact location information (size and position) of each rendered object in the viewable area. Draw: Draws the computed pixel information on the screen.

The reflow and repaint operations are performed several times during the page display, and the cost of reflow is much higher than the cost of repaint. Because repaint simply redraws a part without changing the layout of the page, such as changing the background color of an element. If you change the display property of an element from block to none, you need to reflow.
Reduced Rpaint and Reflow methods

Reference Links:
How a complete HTTP transaction is a process.
How the browser works inside
Introduction to Browser rendering principles
Render tree construction, layout, and drawing
How to increase page load speed via Preloader
Understanding the rendering process for HTML pages

Author: dreammin_chen
Links: http://www.jianshu.com/p/c1dfc6caa520
Source: Pinterest
Copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please specify the source.