Finally, enter the URL from your browser to render the page content, the middle of what happened?
1. Enter the URL, the browser sends a UDP packet to the DNS server, the URL is resolved to an IP address (i.e., IP server) via DNS, and the IP address of the buffer.
2. established between the client (browser) and server-side TCP connections: Because TCP Postman need to know four things (the local IP, local port, server IP, server port), now only know the local IP, server IP, the two ports how to do? Among them, the local port is very simple, the operating system can randomly assign one to the browser, server port easier, using a "well known" port, HTTP service is 80 (HTTPS service is 443), we tell TCP mailman on the line . After the next three-way handshake, the client and server-side TCP connection is set up!
3. The browser sends an HTTP request.
4. Web server processes the request, and the HTTP Response (an HTML page) back to the browser.
The browser initiates a request again: For this HTML page may reference a lot of other resources, such as JS files, CSS files, pictures, etc., these resources on the server side, and may be located in another domain name below. So the browser had downloaded one by one, use DNS to obtain an IP from the beginning, even before the thing done it again.
6. When the server sends JS, CSS these files to the browser, tell the browser when the file expires (using the Cache-Control or Expire), the browser can cache files locally, when the second request for the same when the file, if not expired, directly from the local take on it. If expired, the browser can ask the server side, the file has not changed? (Based on the Last-Modified and ETag sent by a server), and if not changed (304 Not Modified), the cache may also be used. Otherwise, the server will send the latest file sent back to the browser.
7. Now the browser got all the resources - three important things:
- HTML, browser, it parsed into DOM Tree
- CSS, the browser parses it into CSS Rule Tree
- JavaScript, it can modify the DOM Tree
The browser DOM Tree and Tree generated by the CSS Rule so-called "Render Tree", is calculated for each element of the position / size, layout, and then calls the operating system API to paint. Finally, we will be able to see the page of the presentation.
reference:
Finally, enter the URL from your browser to render the page content, the middle of what happened?
END