嗦嗦postMessage和webSocket

前端监控

本文将从前端监控要做的3件事讲起，以及看看github上的web-tracing插件是怎么做的，尽可能展开里面关于用户体验的知识点。主要有以下几点：

• 行为监控
• 错误收集
• 性能监控### 行为监控

行为监控就是页面上加装摄像头，把我们的页面看作是游乐园，把游客访问页面看作是进游乐园游玩。那么只要在游乐园的门口，与各个主题园区加装上一个闸门，就能清楚知道游乐园里面有多少游客，那个主题最受欢迎。然后在游乐园的商店门口加装摄像头，可以监测到特定的店铺吸引哪些用户群体。换过来我们浏览器也相同，我们在进入页面的时候，触发路由事件就是游乐园的门，在页面上触发的鼠标事件就像是摄像头，页面的行为监控大致就是这些。

为什么要做用户的行为情况监控？其实也就是问：采集了用户的行为信息后我们能做什么，答案其实很简单：

• PV、UV量，日同比、周同比等。能清晰的明白流量变化
• 用户热点页面、高访问量TOP10
• 设备、浏览器语言、浏览器、活跃时间段等的用户特征
• 用户的行为追踪：某个用户，进入了网站后的一系列操作或者跳转行为；
• 用户自定义埋点上报用户行为：想做一些自定义事件的监听，比如播放某个视频的行为动作
• 多语种站点，每个语种的用户量

收集页面级的数据

那怎么收集页面的 PV、UV 呢，这里大概给一个思路，也是我给公司用的自研监控系统中的思路。

一般的路由跳转行为，都是针对于 SPA单页应用的，因为对于非单页应用来说，url跳转都以页面刷新的形式;

接着往下阅读之前，我们先来了解一下，html5 的 History API ，它所支持的 API 有以下五个

• history.back()
• history.go()
• history.forward()
• history.pushState()
• history.replaceState()

同时在 History API 中还有一个 事件 ，该事件为 popstate;它有着以下特点;

• History.back()、History.forward()、History.go()在被调用时，会触发 popstate事件
• 但是History.pushState()和History.replaceState()不会触发 popstate事件。

所以我们需要对 replaceState 和 pushState，去创建新的全局Event事件。然后 window.ad