前端埋点技术方案选型

背景

前端需要添加埋点，记录用户行为，会大量使用到

埋点是什么？

可以理解为，需要发送请求，并带一些信息给后台

技术可选项

  1. 直接发ajax请求
  2. 是否有其他更高效的办法？
    • 结果还真有：用img请求

为什么是img？

img请求 能够完成整个 HTTP 请求+响应（尽管不需要响应内容）, 执行过程无阻塞

优点

  1. 性能上比较好（是简单请求，不用多一步预检请求的时间消耗）
  2. 跨域友好（img标签 天然支持跨域，可以容易迁移使用)

封装img请求

  1. // json转url
  2. const parseUrl = (json) => {
  3.   return Object.keys(json).map(key => encodeURIComponent(key) + '=' + encodeURIComponent(json[key])).join('&')
  4. }
  5. const imgAjax = (params) => {
  6.   const url = 'https://xxxx/xx' + '?' + parseUrl(params)
  7.   const img = new Image()
  8.   img.src = url
  9.   img.style.display = 'none'
  10.   document.body.appendChild(img)
  11.   document.body.removeChild(img)
  12. }
  13. imgAjax(params)

7.26更新，有比img更好的方法

对比上面img请求的优点：

  1. img优点他都有
  2. 写法更简单
  3. 更彻底的异步（可以在浏览器空闲的时候发请求，img请求也做不到）

Navigator.sendBeacon()

  1. // json转url
  2. const parseUrl = (url, json) => {
  3.   return url + '?' + Object.keys(json).map(key => encodeURIComponent(key) + '=' + encodeURIComponent(json[key])).join('&')
  4. }
  5. navigator.sendBeacon( parseUrl('http://xxx', { text: 123 }) )

验证第三点：更彻底的异步（可以在浏览器空闲的时候发请求，img请求也做不到）

如图，红色部分是 navigator.sendBeacon，可以在浏览器空闲的时候发请求
sendBeacon.png