了解前端监控和埋点（持续更新中，，，）

基本概念：
前端埋点主要是为了运营以及开发人员采集用户行为数据，以及页面性能等数进行后续的数据分析。
一般目的:
1. 性能监控
2. 数据监控
3. 异常监控
埋点方案：
5. 代码埋点
6. 无埋点
7. 可视化埋点

埋点的目的：
在现今用户就是上帝的年代，互联网竞争如此之大的时代，有针对性的对每个用户的喜好定制不同的内容，按照用户的喜好去决定产品迭代方向已经成为各个互联网公司必须要专注去做的事情，于是埋点便成为了获取信息必不可少的一种方式。

性能监控
有针对性的对每个用户的喜好定制不同的内容，按照用户的喜好去决定产品迭代方向已经成为各个互联网公司必须要专注去做的事情，于是埋点便成为了获取信息必不可少的一种方式。

注意: 这个白屏时长和首屏加载时长不是一回事吗？这里的白屏时长其实指的时，页面从请求到达到渲染条件，出现ui骨架的时间（这里测试的是请求域名到dns解析完毕，返回页面骨架的时间）而首屏加载时长是页面所有动态内容加载完成的时间，其中包括ajax数据后渲染到页面的时间。

常见的性能监控：
1.不同用户，不同机型和不同系统下的首屏加载时间
2.白屏时间
3.http等响应的请求时间
4.静态资源整体下载时间
5.页面渲染时间
6.页面交互动画完成时间

异常监控

此外，产品的前端代码在执行过程中也会发生异常，因此需要引入异常监控。及时的上报异常情况，可以避免线上故障的发上。虽然大部分异常可以通过try catch的方式捕获，但是比如内存泄漏以及其他偶现的异常难以捕获。常见的需要监控的异常包括：

• Javascript的异常监控
• 样式丢失的异常监控

数据监控：
所谓数据监控就是能拿到用户的行为，我们也需要注意那么几点：

1、PV访问来量（Page View）
2、UV访问数（Unique Visitor）
3、记录操作系统和浏览器
4、记录用户在页面的停留时间
5、进入当前页面的来源网页（也就是从哪进来的转化）

手动埋点

手动埋点也叫代码埋点，他的本质其实就是用js代码拿到一些基本信息，然后在一些特定的位置返回给服务端，比如
1.域名：document.dpmainURL
2.页面标题： document.title
3.分辨率： window.screen.height & window.screen.width
4.颜色深度：window.screen.colorDepth
5.Referrer: cocument.referrer
6.客服端语言：navigatar.language

Performance
通过Performance 我们便能拿到DNS 解析时间、TCP 建立连接时间、首页白屏时间、DOM 渲染完成时间、页面 load 时间等，等等 废话少说上代码：

//拿到Performance并且初始化一些参数
let timing = performance.timing,
    start = timing.navigationStart,
    dnsTime = 0,
    tcpTime = 0,
    firstPaintTime = 0,
    domRenderTime = 0,
    loadTime = 0;
//根据提供的api和属性，拿到对应的时间
dnsTime = timing.domainLookupEnd - timing.domainLookupStart;
tcpTime = timing.connectEnd - timing.connectStart;
firstPaintTime = timing.responseStart - start;
domRenderTime = timing.domContentLoadedEventEnd - start;
loadTime = timing.loadEventEnd - start;

console.log('DNS解析时间:', dnsTime, 
            '\nTCP建立时间:', tcpTime, 
            '\n首屏时间:', firstPaintTime,
            '\ndom渲染完成时间:', domRenderTime, 
            '\n页面onload时间:', loadTime);

拿到数据以后我们可以在提交，或者通过图片的方式去提交埋点内容:

  // 页面加载时发送埋点请求
$(document).ready(function(){
 // ... 这里存在一些业务逻辑
 sendRequest(params);
});
// 按钮点击时发送埋点请求
$('button').click(function(){
   //  这里存在一些业务逻辑
   sendRequest(params);
});
  // 通过伪装成 Image 对象，传递给后端，防止跨域
    let img = new Image(1, 1);
    let src = `http://aaaaa/api/test.jpg?args=${encodeURIComponent(args)}`;
    img.src = src;
//css实现的埋点
    .link:active::after{
    content: url("http://www.example.com?action=yourdata");
}
<a class="link">点击我，会发埋点数据</a>
//data自定义属性，rangjs去拿到属性绑定事件，实现埋点
//<button data-mydata="{key:'uber_comt_share_ck', act: 'click',msg:{}}">打车</button>

这种埋点方式虽然能精准的监控到用户的行为，和网页性能等数据，但是你会发现，非常繁琐，需要大量的工作量，当然这部分工作也有人帮我们做了，比如像友盟、百度统计等给我们其实提供了服务。我们可以按照他们的流程使用手动埋点。

可视化埋点
这种埋点方案，又叫无痕埋点，解放了前端手动操的工作量，其实本质就是用系统去插入本来需要手动插入的埋点，这种埋点方式由于自带技术壁垒，所以开发人员基本基本不用考虑，花钱即可 ，比较靠谱的服务商 国外的Mixpanel，国内较早支持可视化埋点的有TalkingData、诸葛 IO，腾讯 MTA 等

无埋点
无埋点并不是没有任何埋点，所谓无只是不需要工程师在业务代码里面插入侵入式的代码。只需要简单的加载了一段定义好的SDK代码，技术门槛更低，使用与部署也简单，避免了需求变更，埋点错误导致的重新埋点。比如说百度埋点：

 <script>
      var _hmt = _hmt || []
      ;(function() {
        var hm = document.createElement('script')
        hm.src =
          'https://hm.baidu.com/hm.js?<%= htmlWebpackPlugin.options.baiduCode %>'
        var s = document.getElementsByTagName('script')[0]
        s.parentNode.insertBefore(hm, s)
      })()
    </script>

上报周期和上报数据类型
如果埋点的事件不是很多，上报可以时时进行，比如监控用户的交互事件，可以在用户触发事件后，立刻上报用户所触发的事件类型。如果埋点的事件较多，或者说网页内部交互频繁，可以通过本地存储的方式先缓存上报信息，然后定期上报。
接着来确定需要埋点上报的数据，上报的信息包括用户个人信息以及用户行为，主要数据可以分为：
1.who: appid(系统或者应用的id),userAgent(用户的系统、网络等信息)
2.when: timestamp(上报的时间戳)
3.from where: currentUrl(用户当前url)，fromUrl(从哪一个页面跳转到当前页面)，type(上报的事件类型),element(触发上报事件的元素）
4.what: 上报的自定义扩展数据data:{},扩展数据中可以按需求定制，比如包含uid等信息

前端埋点系统的前后端通信加密
在上报数据的前后端通信中，需要和server端协商加密机制，利用 OpenSSL库来实现的加密，OpenSSL已经是一个广泛被采用的加密算法。前端可以采用node的crypto模块。（这块呆研究）

大致这样做
对于单个用户来说需要展示的监控信息为：
单个用户，在交互过程中触发各个埋点事件的次数
单个用户，在某个时间周期内，访问本网页的入口来源
单个用户，在每一个子页面的停留时间

对于全体用户需要展示的信息为：
某一个时间段内网页的PV和UV
全体用户访问网页的设备和操作系统分析
某一个时间段内访问本网页的入口来源分析
全体用户在访问本网页时，在交互过程中触发各个埋点事件的总次数
全体用户在访问本网页时，网页上报异常的集合

删选功能集合：
时间筛选：提供今日（00点到当前时间）、本周、本月和全年
用户删选：提供根据用户id删选出用户行为的统计信息
设备删选：删选不同系统的整体展示信息