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

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

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

Navigation Timing API是在HTML 5中新增一个可被用于准确测试页面性能的API，该API提供一种简单的获取页面被导航或被加载时的时间及相关信息的方法。目前为止，在Internet Explorer 九、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链接

上面就是整个请求淘宝页面到全部数据（同步异步）接收完成并渲染的整个过程。我能想到的点只有这些，若有错误，恳请你们指出，也欢迎补充！