摘要：此时树，树建好，并渲染完成异步请求开始若有断开每个长连接都会有一定时限，当请求完成之后，断开连接上面就是整个请求淘宝页面到所有数据同步异步接收完成并渲染的整个过程。
地址栏输入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连接
上面就是整个请求淘宝页面到所有数据（同步异步）接收完成并渲染的整个过程。我能想到的点只有这些，如有错误，恳请大家指出，也欢迎补充！
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111474.html
摘要：此时树，树建好，并渲染完成异步请求开始若有断开每个长连接都会有一定时限，当请求完成之后，断开连接上面就是整个请求淘宝页面到所有数据同步异步接收完成并渲染的整个过程。 地址栏输入URL之后到底发生了哪些事情？ 这个问题应该是前端面试中被问概率较大的知识点，综合考察了面试者对于浏览器，计算机网络，HTTP协议，服务器等的基础。本人学生党一枚，近期找工作的过程中也被问了两次，之前回答都是参考...
摘要：此时树，树建好，并渲染完成异步请求开始若有断开每个长连接都会有一定时限，当请求完成之后，断开连接上面就是整个请求淘宝页面到所有数据同步异步接收完成并渲染的整个过程。 地址栏输入URL之后到底发生了哪些事情？ 这个问题应该是前端面试中被问概率较大的知识点，综合考察了面试者对于浏览器，计算机网络，HTTP协议，服务器等的基础。本人学生党一枚，近期找工作的过程中也被问了两次，之前回答都是参考...
摘要：此时树，树建好，并渲染完成异步请求开始若有断开每个长连接都会有一定时限，当请求完成之后，断开连接上面就是整个请求淘宝页面到所有数据同步异步接收完成并渲染的整个过程。 地址栏输入URL之后到底发生了哪些事情？ 这个问题应该是前端面试中被问概率较大的知识点，综合考察了面试者对于浏览器，计算机网络，HTTP协议，服务器等的基础。本人学生党一枚，近期找工作的过程中也被问了两次，之前回答都是参考...
摘要：比如对于的，浏览器实际上不知道到底是什么东西，需要查找网站所在服务器的地址，才能找到目标，这就是下文要说的域名解析。二域名解析当用户在浏览器中输入后你使用的电脑会发出一个请求到本地服务器。 showImg(https://segmentfault.com/img/remote/1460000009317499?w=700&h=466); 这里markdown格式跟简书不太一样，排版可能...
阅读 1922·2021-11-24 09:38
阅读 3314·2021-11-22 12:07
阅读 1875·2021-09-22 16:03
阅读 1896·2021-09-02 15:41
阅读 2600·2021-07-24 23:28
阅读 2191·2019-08-29 13:17
阅读 1533·2019-08-29 12:25
阅读 2647·2019-08-29 11:10
