综述:将问题和思考点总结下来,方便回顾
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.代码压缩后,如何根据收集的错误信心,定位问题呢?