前端埋点技术方案选型

bigtree
764 阅读1分钟

前端埋点技术方案选型

背景

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

埋点是什么？

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

技术可选项

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

为什么是img？

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

优点

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

封装img请求

// json转url
const parseUrl = (url, json) => {
  return url + '?' + Object.keys(json).map(key => encodeURIComponent(key) + '=' + encodeURIComponent(json[key])).join('&')
}
const imgAjax = (params) => {
  const url = parseUrl('http://xxx', params)
  const img = new Image()
  img.src = url
  img.style.display = 'none'
  document.body.appendChild(img)
  document.body.removeChild(img)
}
imgAjax({
  text: 123
})

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

Navigator.sendBeacon()

对比上面的img请求的优点：

  1. img优点他都有
  2. 写法更简单
  3. 更彻底的异步（可以在浏览器空闲的时候发请求，img请求也做不到）
// json转url
const parseUrl = (url, json) => {
  return url + '?' + Object.keys(json).map(key => encodeURIComponent(key) + '=' + encodeURIComponent(json[key])).join('&')
}
navigator.sendBeacon( parseUrl('http://xxx', { text: 123 }) )

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

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

sendBeacon.png

另外，生产环境中 埋点请求如果报错了怎么办？

一般埋点请求是最简单的get请求，只要经过测试，正常是通的，那么一般就没有问题，用户偶尔的网络导致埋点丢失，也是极少量的，无大影响

avatar
文章
阅读
粉丝