什么是前端监控？是指在用户端通过一定的手段获取用户行为，跟踪产品使用情况，并根据监测数据，为产品优化指明方向，为用户提供更准确、更完善的服务。如果这篇文章对你有帮助，??关注+点赞??给作者打气，文章公众号首发，关注前端南九第一时间获取最新文章~前端监控一般都是比较成熟的产品、运营和产品团队需要关注用户在产品中的行为记录，通过用户的行为记录来优化产品。研发测试团队需要关注产品的性能和异常情况，以保证产品的性能体验和安全迭代。所以前端监控一般分为三类：数据监控（监控用户行为）PV/UV：PV（pageview）：即浏览量或点击量；UV：指访问某个站点或点击某条新闻的区别IP地址的人数用户在每个页面停留的时间用户通过什么入口访问该网页用户在相应页面上触发的行为页面等...统计这些数据是有意义的，比如我们知道用户来自哪个渠道，可以进行产品的推广，知道用户在每个页面停留的时间，增加页面的广告推送长时间停留等性能监控（监控页面性能）不同用户、不同机型、不同系统首屏加载时间白屏时间http等请求响应时间静态资源整体下载时间页面渲染时间页面交互动画完成时间等等...这些性能监控的结果可以展示前端的性能。根据性能监控的结果，进一步优化前端性能，尽可能提升用户体验。异常监控（监控产品和系统异常）及时报告异常情况，避免线上故障。虽然大多数异常都可以用trycatch捕获，但是像内存泄漏等偶发异常是很难捕获的。常见需要监控的异常有：Javascript异常监控样式缺失，异常监控埋点报OK。我们上面提到了前端监控的三大类，了解了一个产品需要监控什么内容，为什么需要监控。那么我们前端监控应该如何实现呢？实现前端监控，第一步肯定是采集我们要监控的项目（数据），然后提交到后台存储，最后到数据分析组进行数据分析，然后同步处理数据到操作或者是产品。数据采集??的丰富性和准确性会直接影响到我们前端监控的质量，因为我们会以此为依据来指导未来产品的开发。常见的跟踪点上报方式有人工跟踪、目视跟踪和不跟踪三种。埋点业务逻辑函数定位调用接口，上报埋点数据。【友盟】、【百度统计】等第三方数据统计服务商大多采用该方案。手动埋点允许用户轻松设置自定义属性和自定义事件；所以当你需要深入下钻，细化自定义分析时，使用人工埋点是比较合适的。人工埋点的缺点是项目工作量大，需要埋点的位置太多，产品开发和运营需要反复沟通，容易出现人工错误。如果出错，重新埋点的成本也很高。视觉埋点通过视觉交互的方式替代了上述代码埋点。业务代码与埋点代码分离，提供可视化交互页面，作为业务代码录入。通过这个可视化系统，可以在业务代码中添加自定义的嵌入点事件等，最终输出的代码与业务代码耦合，埋点代码。可视化埋点的缺陷是可以埋点的控件有限，无法手动自定义。无埋点无埋点是指前端自动采集所有事件，上报埋点数据，后端过滤计算有用数据。优点是前端只需要加载一次内嵌脚本，缺点是流量和采集的数据太大，对服务器性能压力很大。为什么用GIF作为埋点？发现过程首先，让我告诉你我是如何发现它的。前段时间，产品提了一个需求，说我们现在的图书曝光报告规范不是他们要的数据，以后图书报告的所有页面都会统一到最新的规范中。曝光规范：书籍出现在可视区域并停留1秒，算作有效曝光。然后按第一个点暴露OK。由于要统一所有的页面，所以只能打包成一个通用的库来使用。这里的实现逻辑就不贴出来了。如果你想看，我会给你发私聊。主要的困难是停留的时间。计算和曝光标记。constexposeReportClass=newexposeReport({scrollDom:"",//滚动容器，建议指定滚动容器，默认为windowwatchDom:".bookitem",//监控dom，建议使用classclass,label还支持time:1000//有效停留时间ms});//提供两种上报方式exposeReportClass.didReport(()=>{//手动上报//回调})exposeReportClass.scrollReport(()=>{//scrollingreporting//callback})//具体的业务逻辑需要放在对应的回调中，上报逻辑开发者不用考虑，因为我的底层已经统一处理了。然后再测试的时候，发现其实是通过图片发起的requestreport和send，并不是我们想的接口report。然后我去查了资料，发现很多大厂都是这样报的！之所以使用GIF上报向服务器上报数据，可以通过请求接口、请求普通文件、请求图片资源等方式来完成。只要能够上报数据，不管是请求GIF文件，请求js文件，还是调用页面接口，服务器其实并不关心具体的上报方式。那为什么所有系统都统一采用请求GIF图片的方式上报数据呢？防止跨域一般来说..域名不是当前域名，所以所有的接口请求都会构成跨域。但是跨域请求很容易因为配置不当而被浏览器拦截报错，这是不可接受的。但是图片的src属性是不跨域的，也可以发起请求。（排除接口上报）防止阻塞页面加载，影响用户体验通常，创建资源节点后，浏览器不会真正发送资源请求，直到将对象注入到浏览器DOM树中。重复操作DOM不仅会造成性能问题，加载js/css资源也会阻塞页面渲染，影响用户体验。但图像请求是例外。不仅不需要在构建图片中插入DOM，只要在js中新建一个Image对象就可以发起请求，不存在阻塞问题。在没有js的浏览器环境下，也可以通过img标签正常管理。这是另一种类型的资源请求。做不到。（排除文件法）与PNG/JPG相比，GIF的体积最小。最小的BMP文件需要74个字节，PNG需要67个字节，合法的GIF只需要43个字节。对于同样的响应，GIF比BMP可以节省41%的流量，比PNG可以节省35%的流量。而且大部分都是用1*1像素的透明GIF来报1x1像素是最小的合法图片。而且，因为是通过图片来完成的，所以图片应该是透明的，这样才不会影响页面本身的显示效果。两者表示图片是透明的，只要用一个二进制位来标记图片为透明色，就不需要存储颜色空间数据，可以节省体积。推荐阅读Reflow&Repaint简介（Reflow&Repaint），以及如何优化它？Promise、Generator和Async之间有什么区别？【Vue源码学习】依赖收集【Vue源码学习】响应式原理探究JS定时器执行不可靠的原因及解决方案从如何使用到如何实现一个Promise页面加载过程超详解原贴地址点这里，欢迎大家关注公众号《前端南玖》我是南玖，下期见！！！
