地址栏输入网址后发生了什么？这个问题应该是前端面试中被问到的概率比较大的一个知识点。全面考察了面试官对浏览器、计算机网络、HTTP协议、服务器等方面的基础知识。我是学生会员，在最近的求职过程中被问了两次。之前的回答都是根据前辈的总结。前端时间使用NavigationTiming草案实现了页面加载时间的埋点统计。我发现可以换个角度来看。详细解释页面加载过程。NavigationTimingAPI是HTML5中的新API，可用于准确测试页面性能。该API提供了一种简单的方法来获取页面导航或加载时的时间和相关信息。到目前为止，该API已在InternetExplorer9、GoogleChrome和FirefoxnightlyBuilds浏览器中得到支持，目前处于草案阶段。下图是发起页面请求时经历的过程：我们以淘宝为例，说说在地址栏输入网址后发生的事情：1.用户在地址栏输入baidu.com（为了方便解释ofredirect，使用移动端访问）2navigationStart：准备开始请求新页面3redirectStart~redirectEnd：页面重定向由于地址栏输入的是taobao.com，因此被重定向到http://www.taobao.com/302之后，再307重定向到https://www.taobao.com/，再重定向到http://m.taobao.com/?sprefer=...最后重定向到https://m.taobao经过307.com/?sprefer...即经过四次重定向，终于访问到手机版淘宝首页。请注意，每次重定向都是在建立自己的TCP/IP之后请求的。也就是说，上面的重定向每次都要经过DNS->TCP/IP->REQUEST->RESPONSE，最终的URL是：https://m.taobao.com/?sprefer...然后去54fetchStart~domainLookupStart:checkcache此时如果资源（https://m.taobao.com/?sprefer...）命中强缓存（Expires/Cache-control），直接读取缓存，不再发起一次网络请求，转9。缓存参考上篇文章讲web缓存因为http://m.taobao.com/?sprefer=...漏缓存，转55domainLookupStart~domainLookupEnd：检查DNS如果由于某种原因（即浏览器使用缓存、长连接或本地资源）没有检查DNS而没有检查DNS，则跳过此步骤，转6。否则检查本地的DNS服务器网络查找服务器IP。6connectStart~connectEnd：建立TCP/IP三向握手连接。如果是HTTPS，则多一个secureConnection，即SSL协议握手过程。之后，每次通信都将被加密和解密。7RequestStart~RequestEnd：服务器处理数据并返回。此时如果命中协商缓存，则返回304没有内容实体。如果未找到，则返回内容实体。8responseStart~responseEnd：浏览器接收数据（先接收header，再接收content）9卸载当前页面（如果有的话）10domLoading：加载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。如果已经过期，各级缓存服务器会向源服务器请求资源，在本地备份并返回给浏览器。13domInteractive：文档解析完成的时刻14domContentLoadedEventStart~domContentLoadedEventEnd：触发DOMContentLoaded事件之前，浏览器完成所有脚本（包括设置了defer属性但没有设置async属性的脚本）的下载和解析后的时刻).15domComplete：document.readyState属性设置为“complete”。这个时候DOM树和Render树就建好了，渲染就完成了。16异步请求开始（如果有的话）17.TCP/IP断开：每个长连接都会有一定的时间限制。请求完成后，断开TCP/IP连接。以上就是请求淘宝页面到接收所有数据（同步和异步）并渲染的整个过程。这些是我唯一能想到的点。如有错误，欢迎指出，欢迎补充！
