前端数据上报

最近刚好使用了Singular的web打点，基于当前web页面，需要记录用户的各种行为，跟我们之前使用谷歌打点是大同小异。回想之前gamebox页面的统计次数处理，目前基于数据的上报做一次小总结

常见上报方案

1、基于脚本请求
可以使用常规的ajax请求、fetch请求，通过请求后端接口，可以记录当前页面访问记录
- 优点：
  - 可以快速上报数据，
  - 结合埋点记录用户的行为，包括点击、滑动、页面停留时间等，比较灵活
  - 支持异步和同步处理响应
- 缺点：
  - 会存在跨域问题
2、使用script、link处理
- 优点：使用这种方式可以解决跨域
- 缺点：需要将script元素、link元素挂载在dom树上,才会发生请求


在另外一个域名下使用地下两个元素
<script async="" src="http://localhost:5501/users/a.js"></script>
<link rel="stylesheet" href="http://localhost:5502/users/a.css">

//基于node
var express = require("express");
var router = express.Router();

/* GET users listing. */
router.get("/a.js", function (req, res, next) {
  res.send("respond with a resource");
});

router.get("/a.css", function (req, res, next) {
  res.send("respond with a resource");
});
module.exports = router;

前端数据上报

3、使用img处理或css中的url处理

对于经常使用图片懒加载的，应该会很熟悉使用img提前加载图片的方案。通过使用Image对象的src设置链接地址就可以正常请求
- 优点：
  - 可以跨域
  - 同时可以选择是否挂载元素到dom上
  - 发生简单、兼容性好
- 缺点：
  - 存在缓存的可能性，会减少重复上报

    <script>
        const img=new Image();
        img.src="http://localhost:5502/users/a.png"
    </script>

    //基于node
    var express = require("express");
    var router = express.Router();

    router.get("/a.png", function (req, res, next) {
      res.send("respond with a resource");
    });
    module.exports = router;

前端数据上报

4、WebSocket
- 优点：
  - 支持双向通信，可以实时传输数据
  - 支持跨域请求
- 缺点：
  - 需要建立长连接，需要服务器和客户端都支持 WebSocket
  - 开发比较麻烦
5、navigator.sendBeacon

HTML5 提供的一个 API，用于在页面卸载前异步地向指定的 URL 发送数据，不会延迟卸载文档，而导致下一个导航出现的慢
- 优点：
  - 方法是异步的，不会影响页面卸载和用户体验
  - 可以跨域
  - 可以确保数据在页面卸载前，成功上报
  - 可以用post请求，发生大量数据，不受url的长度限制，一般get传递参数容易被浏览器限制
  - 不会阻塞页面主线程、不会影响页面性能
- 注意：在许多情况下（尤其是移动设备）浏览器不会产生 unload、beforeunload 或 pagehide 事件。使用 unload 或 beforeunload 事件以在会话结束时发送统计数据这是不可靠的，容易导致收集到数据误差。常见不触发两个事件的情况：
  - 用户加载了网页并与其交互。
  - 完成浏览后，用户切换到了其他应用程序，而不是关闭选项卡
  - 随后，用户通过手机的应用管理器关闭了浏览器应用。

//使用方式也很简单
navigator.sendBeacon(url);
navigator.sendBeacon(url, data);

    <script>
            const res=   navigator.sendBeacon('http://localhost:5502/users/a', "11111");
            console.log(res);
    </script>

var express = require("express");
var router = express.Router();

/* GET users listing. */
router.post("/a", function (req, res, next) {
  res.send("respond with a resource");
});
module.exports = router;

前端数据上报

6、a标签的ping属性
- 优点：
  - 无需 JavaScript 代码参与，网页功能异常也能上报
  - 不受浏览器刷新、跳转过关闭影响，也不会阻塞页面后续行为，这一点和 navigator.sendBeacon() 类似，可以保证数据上报的准确性；
  - 支持跨域
  - post请求
- 缺点：
  - 只能点击触发
  - 只支持a标签
  - 适用于移动端，否则存在兼容性，部分浏览器不支持这个属性

<body>
<a href="https://www.baidu.com/" ping="http://localhost:5502/users/a.js" target="_blank">链接1</a>
<a href="javascript:" ping="http://localhost:5502/users/a">链接2</a>
</body>