VUE（nuxt）项目性能监测统计

最近有个需求是监测性能，要求在移动端项目里统计控制台（如下图）最后一行的Finish，DOMContentLoaded和Load三个时间。

控制台截图

一、指标解释

（1）Finish

• Finish 时间是页面上所有 http 请求发送到响应完成的时间，HTTP1.0/1.1 协议限定，单个域名的请求并发量是 6 个，即Finish是所有请求（不只是XHR请求，还包括DOC，img，js，css等资源的请求）在并发量为6的限制下完成的时间。

• 页面发送请求和页面解析文档结构，分属两个不同的线程，所以 Finish 时间与DOMContentLoaded 和 Load 并无直接关系。

• Finish 的时间比 Load 大，意味着页面有相当部分的请求量，Finish 的时间比 Load 小，意味着页面请求量很少，如果页面是只有一个 html文档请求的静态页面，Finish时间基本就等于HTML文档请求的时间。

（2）DOMContentLoaded

• 对应页面DOMContentLoaded事件触发的时间点：DOM树构建完成。即HTML页面由上向下解析HTML结构到末尾封闭标签 。

（3）Load

• 对应页面Load事件触发的时间点：页面加载完毕。 DOM树构建完成后，继续加载html/css 中的图片资源等外部资源，加载完成后视为页面加载完毕。

二、http请求过程及网页渲染原理

（1）http请求过程

image

（2）渲染原理

image

当我们在浏览器地址输入URL时，浏览器会发送请求到服务器，服务器将请求的HTML文档发送回浏览器，浏览器将文档下载下来后，便开始从上到下解析，解析完成之后，会生成DOM。如果页面中有css，会根据css的内容形成CSSOM，然后DOM和CSSOM会生成一个渲染树，最后浏览器会根据渲染树的内容计算出各个节点在页面中的确切大小和位置，并将其绘制在浏览器上。

html的解析又会被js打断，解析过程中遇到