What really happens when you navigate to a URL

Posted 2020-09-30 HAPPY海贝

感冒了超级不舒服，最近有点过度焦虑了，认真再看看这篇经典文章，翻译如下，以此静心！

 

1、  浏览器地址栏输入网址

2、  浏览器寻找域名对应的IP地址；DNS域名解析系统按照如下顺序进行查找：

　　2.1 浏览器缓存；有时浏览器会短暂的缓存DNS查找记录，操作系统并不会告诉浏览器每个DNS记录的生存时间，所以浏览器在固定的时间缓存他们 (不同浏览器之间，2 - 30分钟)；

　　2.2 操作系统缓存；浏览器缓存中查找无果的情况下，浏览器会进行一个系统调用，gethostbyname的函数，操作系统有自身的缓存。

　　2.3 路由器缓存；

　　2.4 DNS服务器上的ISP缓存；具体指网络服务提供商给网页批量访问加速的一种解决方案，将当期访问量比较大的网页放在缓存中，从而提高访问速度，ISP缓存主要以缓存静态页面为主，如新浪的新闻页；

　　2.5 递归搜索；ISP的DNS服务器开始递归搜索,从根命名服务器,通过com顶级命名服务器，直到Facebook的命名服务器（假设请求的url地址是：Facebook.com）。

3、  浏览器发送http请求到web服务器

以下面这个请求为例：

GET http://facebook.com/ HTTP/1.1

Accept: application/x-ms-application, image/jpeg, application/xaml+xml, [...]

User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; [...]

Accept-Encoding: gzip, deflate

Connection: Keep-Alive

Host: facebook.com

Cookie: datr=1265876274-[...]; locale=en_US; lsd=WW[...]; c_user=2101[...]

 

Get请求定义了要请求的url地址，浏览器也通过User-Agent表明了身份，具体是通过什么浏览器访问的。Accept 和 Accept-Encoding 也声明了接收的类型，Connection请求头的设置告诉服务器保持tcp连接。还有一些记录了登陆用户的账号密码或其他用户设置的信息的cookies也会随每一次的请求一并发送到服务器。在优化网站时，可以通过fiddle或firebug等工具进行这些详细信息的查看。

注意：在URL http://facebook.com/末尾的斜杠也是非常重要的，该请求浏览器可以直接添加末尾斜杠，但是譬如http://example.com/folderOrFile，浏览器就不能在末尾自动的加一个斜杠，因为folderOrFile是目录还是文件不太确定，在这样的情况下，浏览器请求的时候不带斜杠，服务器将响应一个重定向,从而导致不必要的往返。

4、  facebook 的服务器响应一个301永久重定向的状态码，告知浏览器去访问“http://www.facebook.com/” 而不是 “http://facebook.com/”。

服务器不直接响应的原因有：一个是搜索引擎排名，二是多个内容相同的url在缓存方面并不友好。

5、  浏览器重定向

6、  服务器处理请求；

这可能看起来像一个简单的任务,但事实上,这里发生了很多有趣的事情,即便是一个简单的博客网站,更不用说在大规模可伸缩的像facebook这样的网站上。

比如说数据的存储，分片，夜间数据更新等。

7、  服务器返回一个200的html请求；Content-Encoding告知浏览器响应主体部分通过gzip进行了压缩。

8、  浏览器开始渲染html；

9、  浏览器继续发送嵌在html中的请求。Images,css,js等，每一个地址都要经历类似于HTML页面请求的过程，域名的DNS查找,发送请求URL,遵循重定向。。。

静态文件和动态的网页不同，可以在浏览器中进行缓存，有些文件直接从缓存中得到，并没有经过服务器，浏览器通过解读包含Expires响应头设置的文件知道如何去缓存特定的文件，同时，每个响应一般都会有一个ETag(类似于版本号)，如果浏览器看到一个已经存在相同ETag的文件，会立即中断该条请求的通信线路。

访问量比较大的网站会设置CDN,缓存一些静态资源,实现负载均衡。

10、浏览器发送异步的ajax请求。

 

本文参考：http://igoro.com/archive/what-really-happens-when-you-navigate-to-a-url/