美文网首页
搭建前端性能监控系统

搭建前端性能监控系统

作者: Thomas赵骐 | 来源:发表于2019-06-27 14:46 被阅读0次

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

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

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

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

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

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

    4、目标

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

    相关文章

      网友评论

          本文标题:搭建前端性能监控系统

          本文链接:https://www.haomeiwen.com/subject/bxcrcctx.html