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

搭建前端性能监控系统

作者: 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、目标

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

相关文章

  • 搭建前端性能监控系统

    1、我们为什么要搭建自己的前端监控系统? 2、我们可以检测到哪些时间因素? 3、着重监测的关键性能指标 4、目标

  • 前端异常监控平台搭建

    一、资料收集 前端异常监控系统的落地前端异常监控解决方案研究从初级到高级前端---异常监控系统的搭建从无到有<前端...

  • 前端异常监控解决方案研究(转)

    前端监控包括行为监控、异常监控、性能监控等,本文主要讨论异常监控。对于前端而言,和后端处于同一个监控系统中,前端有...

  • 【前端】异常监控解决方案研究

    前端监控包括行为监控、异常监控、性能监控等,本文主要讨论异常监控。对于前端而言,和后端处于同一个监控系统中,前端有...

  • 博客集

    7 天打造前端性能监控系统【推荐收藏】web移动端常见问题总结高性能网站建设

  • 前端异常监控解决方案研究

    本文出自 Tencent CDC(前端异常监控解决方案研究) 前端监控包括行为监控、异常监控、性能监控等,本文主要...

  • 前端搭建监控系统sentry私服

    跟着参考链接教程来的:Docker + Sentry 搭建前端监控系统[https://juejin.cn/pos...

  • 用户行为监控之webfunny

    webfunny是一款轻量级前端异常监控和前端性能监控系统,致力于线上项目的实时分析。PV、UV数据的变化趋势,线...

  • 一步一步搭建前端监控系统:JS错误监控篇

    摘要: 徒手写JS错误监控。 作者:一步一个脚印一个坑 原文:搭建前端监控系统(二)JS错误监控篇 Fundebu...

  • 策略PM入门学习(三)

    2.3 【实例】效果监控系统搭建 网页搜索中图片类特型结果的监控体系 2.4 【实例】策略监控系统搭建 小结:...

网友评论

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

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