前端性能监控平台搭建思考

最新推荐文章于 2024-07-21 13:42:42 发布

Programmer boy

最新推荐文章于 2024-07-21 13:42:42 发布

阅读量666

点赞数

分类专栏：性能优化文章标签： javascript

本文链接：https://blog.csdn.net/m0_37631322/article/details/109505228

版权

性能优化专栏收录该内容

7 篇文章 0 订阅

订阅专栏

综述：将问题和思考点总结下来，方便回顾

1.目前获取的前端性能指标的原理分析？

主要的指标有:

错误日志, 获取数据的主要API window.addEventListener('error', function (e) {}) window.onerror window.addEventListener('unhandledrejection', function (e) {})
页面性能日志，获取数据的主要API performance.timing
页面资源（script,img,ajax）加载日志,获取数据的主要API performance.getEntriesByType('resource')
如何对前端页面卡顿进行监控，以下是主要的实现思路

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #animate{
            color:#e01313;
            width:100px;
            height:20px;
        }
    </style>
</head>
<body>
<div id='animate'></div>
<script>
const element = document.getElementById('animate'); 
let start;

function step(timestamp) {
  if (start === undefined)
    start = timestamp;
  const elapsed = timestamp - start;
  //这里使用`Math.min()`确保元素刚好停在200px的位置。
  element.style.transform = 'translateX(' + Math.min(0.1 * elapsed, 200) + 'px)';
  if (elapsed < 2000) { // 在两秒后停止动画
    window.requestAnimationFrame(step);
  }
}
window.requestAnimationFrame(step);
</script>
</body>
</html>

2.项目整体设计架构解析？

3.如何设计自定义数据埋点上报？

在上报系统中增加一种类型type=4，将自定义的数据上传给后端。
首先创建自定义上报事件的管理页面，后台接口，数据库的表
每次需要自定义上报数据时，必须要去上述页面进行注册，获取对应的eventID
在需要获取自定义数据的地方，触发window.reportData(4,false,{eventId:'XXXX',otherInfo:'YYYY'})将日志数据进行上报
编写接收日志数据接口，并将其存储到后台数据库的方法
编写前端接口对上传的自定义事件的数据进行查询和分析，便于由此获取到有意义的数据进行分析

4.如果要监控页面是否卡顿，应该如何去实现呢？

每秒钟计算一次网页的 FPS 值，获得一列数据，然后分析。通俗地解释就是，通过 requestAnimationFrame API 来定时执行（这个方法好吗？再确认下有没有别的方案？）一些 JS 代码，如果浏览器卡顿，无法很好地保证渲染的频率，1s 中 frame 无法达到 60 帧，即可间接地反映浏览器的渲染帧率。

5.百度性能监控平台中是如何实现性能数据上报的？为什么要通过gif的方式上报自定义监控数据？为什么不通过post请求方式？为什么不通过请求js，css等文件方式？使用图片的话，为什么不用png等其他格式呢,要使用gif的图片呢？

参考链接：https://blog.csdn.net/huangpb123/article/details/102999371

前端监控使用GIF进行上报主要是因为：

没有跨域问题,相比于使用普通的get,post请求。一般日志埋点系统和主业务是部署在不同的系统中的。但是在目前系统中，因为有代理转发可以不考虑
不会阻塞页面加载，影响用户体验，

这和浏览器的特性有关。通常，相比于请求js，css, ttf字体文件，创建资源节点后只有将对象注入到浏览器DOM树后，浏览器才会实际发送资源请求。反复操作DOM不仅会引发性能问题，而且载入js/css资源还会阻塞页面渲染，影响用户体验。

但是图片请求例外。构造图片打点不仅不用插入DOM，只要在js中new出Image对象就能发起请求，而且还没有阻塞问题，在没有js的浏览器环境中也能通过img标签正常打点，这是其他类型的资源请求所做不到的。
在所有图片中体积最小，相较BMP/PNG，可以节约41%/35%的网络资源。

6.目前的自定义事件上传功能是如何设计功能的？

7.还需要做什么功能？在哪方面还是空白的？需要补充的？

8.加入当前端代码还没有发版本，但是后端已经发布了，此时，将会存在大量的错误日志上报回来，此时怎样做削峰处理呢？

前端对错误数据进行打包，隔一段时间，或者当数据一定量之后，进行一次上传
redist使用消息队列处理消息，这块的机制要了解下
每隔一段时间去清除mongodb中的存储数据，避免被大量数据占满

9.redisd中的定时任务和消息队列模式进行对比？那种更加适合处理上述存在的问题呢？仔细思考下这里的应用？

10.监控系统中，安全测试不通过，加验证码功能？

11.登录之后sessionId如何在多台节点服务器之间进行共享？

12.localStorage中存储满了之后，性能监控系统会一直收集到错误信息？

13.代码压缩后，如何根据收集的错误信心，定位问题呢？

Programmer boy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
前端性能监控平台搭建思考

综述：将问题和思考点总结下来，方便回顾1.目前获取的前端性能指标的原理分析？主要的指标有:错误日志, 获取数据的主要APIwindow.addEventListener('error',function(e){}) window.onerrorwindow.addEventListener('unhandledrejection',function(e){}) 页面性能日志，获取数据的主要APIperformance.timing 页面资源（script,...
复制链接

扫一扫

专栏目录