为什么要做Session Trace 这个功能?
在页面加载 DOM processing 和Page rendering 两个阶段耗时比较长,但之前的Browser Insight 没有展示这两个阶段细节。
session Trace 源自 chrome developer tools
现在Browser Insight 可以收集到从用户点击页面页面加载,到用户离开页面页面卸载这个过程中的全部资源的加载时间、ajax请求时间、事件的触发时间、和部分函数执行的时间
先看看正在做的截图吧
对于资源的加载有dns 解析等时间
对于ajax 有等待时间和回调函数执行的时间
之前在trace 详情里面,无法查看细节的 dom和page,也可以在这里找到对应的详情,
菜单栏里面的按钮 dom 和page 分别可以查看 在dom构建和page渲染两个阶段的详细情况
页面中加载这么多资源和发起这个多ajax,耗时top5资源和ajax已经找出来了,需要注意的是,这里的top5 是用户在整个页面进行所有操作后,页面所加载的资源和发起的ajax,而不仅仅是页面加载阶段的。
用户的浏览器信息、地理位置信息、页面加载阶段的DOM processing 耗时和 Page rendering 耗时 和错误的数量 都放在一起展示了
时间坐标、时间戳、时间段
1 是坐标 会随着鼠标的滚动而变化,不是固定死的,
2 时间戳 一些事件的触发和执行时间小于1ms 的事件被作为时间戳,用一个小圆点表示
3 资源和ajax和耗时较长的事件都被作为时间段,用一个长方形表示
Session Trace 下一步解决问题
重点解决交互过程中的关键操作的耗时