如何在不崩溃服务器的情况下跟踪鼠标移动答案

【问题标题】：How to track mouse movement without crashing server如何在不崩溃服务器的情况下跟踪鼠标移动
【发布时间】：2021-09-18 18:33:21
【问题描述】：

我的任务是制定衡量用户如何与我们的门户网站互动的指标。一位同事建议我查看“热图”以监控用户鼠标位置。这个想法对我来说似乎很酷。似乎已经有一些 SaaS 解决方案，但我们的预算很薄，所以我编写了一些 javascript：

class UserLog {
  constructor(){
    // ...
    this.results = {... mouseMovements=[]}
  }
  /* ... more functions ... */

  trackMouseMovement(){
    document.addEventListener('mousemove', (event) => {
      this.results.mouseMovements.push({
        timestamp: Date.now(),
        x: event.pageX,
        y: event.pageY
      });
    });
  }
}

我目前正在使用计时器每 10 秒将此数组发送到我的服务器：

window.setInterval(() => {
  $.ajax({
    url: endpoint, 
    type: "POST",
    data: this.results,
  });
},10*1000);

我遇到了mouseMovements 数组，它的长度可以达到数百个元素，并且在 ajax 执行时让我的浏览器崩溃。

我可以尝试更频繁地发送数据，或者我可以尝试预处理mouseMovements 数组：

preprocessData: results =>{
    const newResults= {
      ...results,
      mouseMovements: results.mouseMovements.filter((val, index) => index % 10 == 0)
    }
    return newResults
  }

(1) 人们如何实现鼠标跟踪协议，以允许用户的机器照常运行并在后端提供足够的分辨率来回放用户的会话并了解如何改善他们在网站上的体验？

(2) 我应该多久向我的服务器发送一次 ajax 请求？我正在查看一些主要网站，并注意到他们的请求似乎是点击驱动的。跟踪鼠标移动和滚动不是最佳的吗？或者有没有更好的方法来收集这些信息？

【问题讨论】：

您是否有理由需要跟踪 mousemove ？该事件是交互的一部分吗？与点击、鼠标按下事件等相比？
我是这个网站上唯一的开发者。我对后端和数据分析非常满意，但是当我不可避免地不得不调试用户工单时，我非常害怕我会搞砸前端并希望拥有所有可用的工具

标签： javascript analytics

【解决方案1】：

首先，您需要限制您的 API 请求，大多数协作产品如 Figma 设计工具，您可以在其中实时看到其他人的鼠标位置，最有可能在 600ms 中发送一次鼠标位置.

600ms 是 janky，但是如果您将鼠标位置视为 keyframes，那么您可以在两个鼠标位置之间进行动画处理，因此用户将始终看到平滑的鼠标移动，当然这取决于您的动画算法。

【讨论】：

我没有考虑为丢失的帧设置动画。好想法！限制 API 背后的基本原理是什么？ DOS攻击？
因为鼠标移动事件发生得非常快！它很容易压垮服务器。