性能优化篇 - 链接是如何解析的

491 阅读4分钟

前言

互联网时代,我们每天都会在网上查看很多的内容:购物、新闻、娱乐、生活等衣食住行的一系列事情,那为什么我们输入一个网址,就可以打开对应的内容,这个过程是怎么实现的,还有,作为一个开发,我想让用户在最短的时间内最快的打开我的网站,我需要做哪些事情,不管是资源压缩、合并等一系列操作,都是在加载到资源的时候,才会涉及到的性能问题,那么,我们怎么在加载到资源前知道浏览器都做了什么,通过知道浏览器都做了什么,我们可以深层次的去分析存在的问题,并去做相应的优化,把用户体验提升到极致。

先上图

浏览器解析页面过程图

navigationStart: 在同一个浏览器上下文中,前一个网页(与当前页面不一定同域)unload 的时间戳,如果无前一个网页 unload ,则与 fetchStart 值相等

unloadEventStart: 前一个网页(与当前页面同域)unload 的时间戳,如果无前一个网页 unload 或者前一个网页与当前页面不同域,则值为 0

unloadEventEnd: 和 unloadEventStart 相对应,返回前一个网页 unload 事件绑定的回调函数执行完毕的时间戳

redirectStart: 第一个 HTTP 重定向发生时的时间。有跳转且是同域名内的重定向才算,否则值为 0

redirectEnd: 最后一个 HTTP 重定向完成时的时间。有跳转且是同域名内部的重定向才算,否则值为 0

fetchStart: 浏览器准备好使用 HTTP 请求抓取文档的时间,这发生在检查本地缓存之前

domainLookupStart: DNS 域名查询开始的时间,如果使用了本地缓存(即无 DNS 查询)或持久连接,则与 fetchStart 值相等

domainLookupEnd: DNS 域名查询完成的时间,如果使用了本地缓存(即无 DNS 查询)或持久连接,则与 fetchStart 值相等

connectStart: HTTP(TCP) 开始建立连接的时间,如果是持久连接,则与 fetchStart 值相等

注意: 如果在传输层发生了错误且重新建立连接,则这里显示的是新建立的连接开始的时间

secureConnectionStart: HTTPS 连接开始的时间,如果不是安全连接,则值为 0

connectEnd: HTTP(TCP) 完成建立连接的时间(完成握手),如果是持久连接,则与 fetchStart 值相等

注意: 如果在传输层发生了错误且重新建立连接,则这里显示的是新建立的连接完成的时间;这里握手结束,包括安全连接建立完成、SOCKS 授权通过

requestStart: HTTP 请求读取真实文档开始的时间(完成建立连接),包括从本地读取缓存;连接错误重连时,这里显示的也是新建立连接的时间

responseStart: HTTP 开始接收响应的时间(获取到第一个字节),包括从本地读取缓存

responseEnd: HTTP 响应全部接收完成的时间(获取到最后一个字节),包括从本地读取缓存

domLoading: 开始解析渲染 DOM 树的时间,此时 Document.readyState 变为 loading,并将抛出 readystatechange 相关事件

domInteractive: 完成解析 DOM 树的时间,Document.readyState 变为 interactive,并将抛出 readystatechange 相关事件

注意: 只是 DOM树解析完成,这时候并没有开始加载网页内的资源

domContentLoadedEventStart: DOM 解析完成后,网页内资源加载开始的时间;在 DOMContentLoaded 事件抛出前发生

domContentLoadedEventEnd: DOM 解析完成后,网页内资源加载完成的时间(如 JS 脚本加载执行完毕)

domComplete: DOM 树解析完成,且资源也准备就绪的时间,Document.readyState 变为 complete,并将抛出 readystatechange 相关事件

loadEventStart: load事件发送给文档,也即load回调函数开始执行的时间

注意: 如果没有绑定 load 事件,值为 0

loadEventEnd: load 事件的回调函数执行完毕的时间

在前面的内容中,多次提到了传输层,传输层其实就是OSI模型当中的一个层,一共有7层,前端一般涉及到的是5层,如果想要具体了解一下的朋友,请跳这里:OSI七层模型与TCP/IP五层模型

总结

上面呢,基本上就是概括了浏览器从输入网址到dom渲染后的整个过程,里面一部分内容是通过向网上的大佬学习总结的,如果不足的地方,还请各位补充,我会及时改进。