埋点脚本的优化之路

2023-12-26 00:57:18

埋点日志上报脚本是前端埋点中必不可少的一部分，它负责将前端用户行为数据收集起来并发送到后端服务器。一个好的埋点脚本可以帮助我们更好地了解用户行为，从而优化产品和服务。

从一个埋点日志上报脚本说起

最简单的埋点日志上报脚本可能是这样的：

function analytics(action) {
  const img = new Image();
  img.src = `https://example.com/analytics?action=${action}`;
}

这段脚本通过创建一个新的图片对象，然后将图片的src属性设置为一个包含要上报的动作的URL。当图片加载时，浏览器就会向后端服务器发送一个请求，并将动作作为请求参数。

这种方式虽然简单，但是存在一些问题：

SEO不友好。 图片请求不会被搜索引擎抓取，因此无法对页面内容进行索引。
性能开销大。 图片请求需要消耗网络带宽和浏览器资源，可能会影响页面的加载速度。
用户体验不佳。 图片请求可能会导致页面出现闪烁或跳动，影响用户体验。

优化埋点脚本

为了解决这些问题，我们可以对埋点脚本进行优化。

SEO优化

为了使埋点脚本对SEO友好，我们可以使用XMLHttpRequest对象来发送请求。XMLHttpRequest对象可以发送异步请求，不会阻塞页面加载。而且，XMLHttpRequest对象可以设置请求头，以便服务器可以识别请求来自何处。

function analytics(action) {
  const xhr = new XMLHttpRequest();
  xhr.open("POST", "https://example.com/analytics");
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xhr.send(`action=${action}`);
}

性能优化

为了减少埋点脚本对性能的影响，我们可以使用事件委托来减少事件处理器的数量。事件委托是指将事件处理程序附加到父元素，而不是子元素。当子元素触发事件时，事件会冒泡到父元素，然后由父元素的事件处理程序处理。

document.body.addEventListener("click", function(event) {
  const action = event.target.getAttribute("data-action");
  if (action) {
    analytics(action);
  }
});

用户体验优化

为了改善用户体验，我们可以使用节流和防抖来防止埋点脚本过于频繁地发送请求。节流是指在一段时间内只允许发送一次请求。防抖是指在一段时间内只发送最后一次请求。

function analytics(action) {
  if (throttled) {
    return;
  }

  throttled = true;
  setTimeout(() => {
    throttled = false;
  }, 500);

  const xhr = new XMLHttpRequest();
  xhr.open("POST", "https://example.com/analytics");
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xhr.send(`action=${action}`);
}