去大厂，你就应该了解前端监控和埋点!

前言

踏足行业几年了，始终游离于中小型项目，因为项目用户较少，因此前端监控方面很是生疏，最近开始接收大流量项目，却对埋点，监控一无所知，深感惭愧，因而苦学几日，心得以下：

什么是埋点？

百度原话：埋点分析，是网站分析的一种经常使用的数据采集方法

其实通俗的讲前端埋点主要是为了运营以及开发人员采集用户行为数据，以及页面性能等数进行后续的数据分析，举一些例子：好比，拿到页面在各类网络下的加载时间，再好比拿到用户在某个页面的停留时间！

埋点的目的是什么？

在现今用户就是上帝的年代，互联网竞争如此之大的时代，有针对性的对每一个用户的喜爱定制不一样的内容，按照用户的喜爱去决定产品迭代方向已经成为各个互联网公司必需要专一去作的事情，因而埋点便成为了获取信息必不可少的一种方式。那咱们埋点有什么目的呢？须要拿到点什么呢？

性能监控

在小项目时，因为用户数量很少，你们以为过得去就行，而当用户数量激增之后，性能监控，就显得很是重要，由于，这样你能就能知道潜在的一些问题和bug，而且能快速迭代，得到更好的用户体验！通常状况下，咱们在性能监控时须要注意那么几点：

• 一、白屏时长
• 二、重要页面的http请求时间
• 三、重要页面的渲染时间
• 四、首屏加载时长

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

数据监控

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

• 一、PV访问来量（Page View）
• 二、UV访问数（Unique Visitor）
• 三、记录操做系统和浏览器
• 四、记录用户在页面的停留时间
• 五、进入当前页面的来源网页（也就是从哪进来的转化）

如何埋点

知道了埋点的做用之后，咱们再来看看怎么埋，才能达到效果，其实埋点也有不少讲究，接下来解剖！

手动埋点

手动埋点也叫代码埋点，他的本质其实就是用js代码拿到一些基本信息，而后在一些特定的位置返回给服务端，好比：

如上图咱们能够拿到这些内容，再好比:

我还能够拿到这些，有人就有疑问了，这些我咋拿到呢？

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>
复制代码

上图一段代码插入咱们的html中

咱们便能清晰的看到统计数据，省时省力，就是不省钱！可是缺点就是因为是自动完成，没法针对特定场景拿到数据，由后端来过滤和计算出有用的数据。致使服务器压力山大，不过，既然花了钱了，咱也就无论了！

总结

因为初学，没有实战经验，除了使用过百度无埋点方案，其余并未涉及，上述内容也只是，在巨人的肩膀上复述总结，并没有本身的思考和看法，如后期实战时候，定来修改！

再此推荐一位大佬的总结，收益匪浅，因为埋点着实须要亲身实践才能知其韵味，纸上谈兵到底难登大雅，就不给大佬的心得抄过来了，在此附上大佬连接，若有兴趣深刻了解，请移驾：

前端埋点的那些事