搭建前端性能监控系统

1、我们为什么要搭建自己的前端监控系统？

众所周知我们平台的性能直接和公司的收益挂钩，根本原因还是在于性能影响了用户体验。
加载的延迟、操作的卡顿等都会影响用户的使用体验。
尤其以我们的语音标注平台为例，时间就是效率，就是金钱。
因此我们需要一套性能监控系统持续监控、评估、预警页面性能状况，
针对海量数据来分析我们的用户在标注页面的时间分布，进而进行针对点的优化。

2、我们可以检测到哪些时间因素？

白屏时间：从打开网站到有内容渲染出来的时间节点；
首屏时间：首屏内容渲染完毕的时间节点；
用户可操作时间节点：domready触发节点；
总下载时间：window.onload的触发节点。

3、着重监测的关键性能指标

用户进入标注页面的时刻开始计算，一直到页面有内容展示出来的时间节点。
这个过程包括dns查询、建立tcp连接、发送首个http请求、
返回html文档、html文档head解析完毕。
我们着重可以监测点有DNS查询耗时、TCP链接耗时 、
request请求耗时、解析dom树耗时、绘制css 规则树耗时。

4、目标

拿到以上大数据，我们可以针对性的分析用户在标注页面的具体耗时，
因此也可量化我们每次优化的点所带来的效率提升。