地址栏输入网址后发生了什么?这个问题应该是前端面试中被问到的概率比较大的一个知识点。全面考察了面试官对浏览器、计算机网络、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连接。以上就是请求淘宝页面到接收所有数据(同步和异步)并渲染的整个过程。这些是我唯一能想到的点。如有错误,欢迎指出,欢迎补充!
