地址栏输入URL之后到底发生了哪些事情

地址栏输入URL之后到底发生了哪些事情？

这个问题应该是前端面试中被问概率较大的知识点，综合考察了面试者对于浏览器，计算机网络，HTTP协议，服务器等的基础。本人学生党一枚，近期找工作的过程中也被问了两次，之前回答都是参考前人的总结，前端时间用Navigation Timing draft实现了埋点统计页面加载时间，发现可以从另一个角度详解页面加载的过程。

Navigation Timing API是在HTML 5中新增一个可被用于准确测试页面性能的API，该API提供一种简单的获取页面被导航或被加载时的时间及相关信息的方法。目前为止，在Internet Explorer 9、Google Chrome以及Firefox nightly Builds浏览器中对该API提供支持，目前处于草案中。

下图为发起页面请求时所经历的过程：

下面我们以上图为时间轴，以淘宝为例，说说地址栏输入URL之后发生了哪些事情

1 用户在URL栏输入 baidu.com（便于说明重定向，采用移动端访问）
2 navigationStart：准备开始请求新页面
3 redirectStart~redirectEnd：页面重定向
由于地址栏输入的是taobao.com
经过302重定向到http://www.taobao.com/,
再经过307重定向到https://www.taobao.com/,
再进过302重定向到http://m.taobao.com/?sprefer=...
最后经过307重定向到https://m.taobao.com/?sprefer...
即，经过四次重定向最终访问移动版淘宝首页
注意，每个重定向都是在建立各自TCP/IP之后才请求的。也就是说上述重定向每次都经过DNS->TCP/IP->REQUEST->RESPONSE

最后URL为：https://m.taobao.com/?sprefer...接着到5
4 fetchStart~domainLookupStart：检查缓存
此时，若该资源（https://m.taobao.com/?sprefer...）命中强缓存（Expires/Cache-control），则直接读取缓存，不再发起网络请求，到9。
有关缓存参考上一篇文章说说web缓存
由于http://m.taobao.com/?sprefer=...未命中缓存，接着到5
5 domainLookupStart~domainLookupEnd：检查DNS
若因为任何原因没有去检查DNS（即浏览器使用了缓存，持久连接，或者本地资源）而无需检查DNS，该步跳过，到6。否则在检查本地网络的DNS服务器，找到服务器IP。
6 connectStart~connectEnd:建立TCP/IP三次握手连接
若为HTTPS，多一个secureConnection,即SSL协议握手过程。此后每次通信都多加解密过程。

7 RequestStart~RequestEnd:服务器处理数据，并返回。
此时，若命中协商缓存，返回304，且不带内容实体。若未命中，返回内容实体。
8 responseStart~responseEnd:浏览器接收数据（先接收头部，再内容）
9 卸载当前页面（如有的话）
10 domLoading：加载HTML,并从上到下解析HTML,构建DOM树,Render树,回流,重绘。若遇到需要加载的资源，若JS,CSS,图片等，暂停解析，请求资源。
由于HTTP/1.1中使用长连接keep-connection:active,此时可直接发起多个后续请求，无需重新建立TCP/IP，如下图，都是在同一主机下的资源。

11 若需要加载的资源和当前页面不是在同一个域名下，需要重新从3~8获取资源。浏览器可以并发请求多个资源，即同时建立多个TCP/IP，一般同个域名下IE67为2个，其他为6个。
12 若需要加载的资源位于CDN服务器上，则在DNS解析中，找到最近的CDN服务器节点，并一级依次找到多级缓存服务器（如有），并解析出真实IP地址。
以一下资源为例，存在于CDN服务器中，并经过多个缓存服务器，最终获取资源。此时，若缓存服务器未过期，则将直接返回缓存服务器的HTML。若已过期，各级缓存服务器将请求源服务器的资源，本地备份并返回给浏览器。

13 domInteractive：文档解析完成的时刻
14 domContentLoadedEventStart~domContentLoadedEventEnd：
当DOMContentLoaded事件触发之前，浏览器完成所有script（包括设置了defer属性但未设置async属性的script）的下载和解析之后的时刻。
15 domComplete：document.readyState属性设置为"complete"。此时DOM树，Render树建好，并渲染完成
16 异步请求开始（若有）
17 TCP/IP断开：每个长连接都会有一定时限，当请求完成之后，断开TCP/IP连接