除了作为一个非常普遍的面试问题，每次当我们在浏览器中输入一个 URL 网址时，它也是一个首先萦绕在我们的脑海的疑问。

这里，我们尝试通过深入探究当我们在浏览器中键入一个 URL 网址时那些背后发生的故事的细节，来消除这个疑问。
 

步骤 1. 在浏览器中输入 URL 。

步骤 2. 如果请求的内容浏览器的缓存中有并且没有过期， 跳转到步骤  8。

步骤 3. 通过DNS 查询来确认服务器的 IP 地址。

when we want to connect to google.com, we actually want to reach out to a server where google web services are hosted. One such server is having an ip address of 74.125.236.65. Now, if you type "http://74.125.236.65" in your browser, this will take you to google home page itself. Which means, "http://google.com" and "http://74.125.236.65" are nothing but same stuff. But, it is not so. Google has multiple servers in multiple locations to cater to the huge volume of requests they receive per second. Thus we should let Google decide which server is best suited to our needs. Using "google.com" does the job for us. When we type "google.com", DNS(Domain Name System) services comes into play and resolves the URL to a proper ip address. 

Following is a summary of steps happening while DNS service is at work:

• Check browser cache: browsers maintain cache of DNS records for some fixed duration. So, this is the first place to resolve DNS queries.
• Check OS cache: if browser doesn't contain the record in its cache, it makes a system call to underlying Operating System to fetch the record as OS also maintains a cache of recent DNS queries.
•  Router Cache: if above steps fail to get a DNS record, the search continues to your router which has its own cache.
•  ISP cache: if everything fails, the search moves on to your ISP. First, it tries in its cache, if not found - ISP's DNS recursive search comes into picture. DNS lookup is again a complex process which finds the appropriate ip address from a list of many options available for websites like Google. You can read more about this here.

For the DNS enthusiasts - here is a great guide worth reading.

步骤 4. 浏览器向服务器发起一个 TCP 链接。

步骤 5. 浏览器向服务器发送一个 HTTP 请求。

Browser sends a GET request to the server according to the specification of HTTP(Hyper Text Transfer Protocol) protocol. 
        

GET http://google.com/ HTTP/1.1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:29.0) Gecko/20100101 Firefox/29.0
Accept-Encoding: gzip, deflate
Connection: Keep-Alive
Host: google.com
Cookie: datr=1265876274-[...]; locale=en_US; lsd=WW[...]; c_user=2101[...]

        
Here, browser passes some meta information in the form of headers to the server along with the URL - "http://google.com". User-Agent header specifies the browser properties, Accept-Encoding headers specify the type of responses it will accept. Connection header tells the server to keep open the TCP connection established here. The request also contains Cookies, which are meta information stored at the client end and contain previous browsing session information for the same website in the form of key-value pairs e.g. the login name of the user for Google.

A quick guide to HTTP specification can be found here.

步骤 6. 服务器处理接收到的请求。

HTTP request made from browsers are handled by a special software running on server - commonly known as web servers e.g. Apache, IIS etc. Web server passes on the request to the proper request handler - a program written to handle web services e.g. PHP, ASP.NET, Ruby, Servlets etc.
        
For example URL- http://edusagar.com/index.php is handled by a program written in PHP file - index.php. As soon as GET request for index.php is received, Apache(our webserver at edusagar.com) prepares the environment to execute index.php file. Now, this php program will generate a response - in our case a HTML response. This response is then sent back to the browser according to HTTP guidelines.

步骤 7. 浏览器接收来自服务器的 HTTP 的响应。

HTTP/1.1 200 OK
Cache-Control: private, no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Pragma: no-cache
Content-Encoding: gzip
Content-Type: text/html; charset=utf-8
Connection: Keep-Alive
Content-length: 1215
Date: Fri, 30 May 2014 08:10:15 GMT

.........<some blob> ................

HTTP 响应以从服务器返回的状态码开头， 下面是一个关于各种状态码的寓意的非常简洁的汇总：        

•         1xx 表示一条信息消息
•         2xx 表示某种成功
•         3xx 表示重定向客户到另一个 URL 网址
•         4xx 表示客户端的一种错误
•         5xx 表示服务器端的一种错误

Server sets various other headers to help browser render the proper content. Content-Type tells the type of the content the browser has to show, Content-length tells the number of bytes of the response. Using the Content-Encoding header's value, browsers can decode the blob data present at the end of the response.

步骤 8. 浏览器渲染收到的 HTML 内容。

Rendering of html content is also done in phases. The browser first renders the bare bone html structure, and then it sends multiple GET requests to fetch other hyper linked stuff e.g. If the html response contains an image in the form of img tags such as <img src="/assets/img/logo.png" />, browser will send a HTTP GET request to the server to fetch the image following the complete set of steps which we have seen till now. But this isn't that bad as it looks. Static files like images, javascript, css files are all cached by the browser so that in future it doesn't have to fetch them again.      

步骤 9. 客户跟服务器的交互。

一旦一个 HTML 页面加载完成，用户可以有几种方式来跟服务器交流。 例如，他可以填写一个登录表单来登录网站 ，这一动作也会遵循上面列出的各种步骤，唯一的区别是，这次是一个 HTTP POST 类型的请求，而不是 HTTP GET 类型的请求，伴随这个请求，浏览器将把表单数据发送给服务器处理  (本例中，就是用户名和密码)。
        
一旦服务器对用户鉴权通过，它将向浏览器发回适当的 HTML 内容（可能是用户的简介） ，因此，当他的登录请求被处理完成后，用户将看到新的网页。

步骤 10. AJAX 查询。

Another form of client interaction with server is through AJAX(Asynchronous JavaScript And XML) requests. This is an asynchronous GET/POST request to which server can send a response back in a variety of ways - json, xml, html etc. AJAX requests doesn't hinder the current view of the webpage and work in the background. Because of this, one can dynamically modify the content of a webpage by calling an AJAX request and updating the web elements using Javascript.

        
希望本篇文章，可以使您明白当我们做了在浏览器中输入一个URL网址这么简单的事情时，底层都发生了些什么事情。

致谢: http://igoro.com/archive/what-really-happens-when-you-navigate-to-a-url/