Web端鼠标追踪技术优化：无服务器崩溃风险的实现方案、数据上报策略及用户交互分析

(1) Building a Balanced Mouse Tracking Protocol #

To keep user devices responsive while retaining enough data for session replay and UX optimization, focus on smart sampling, data compression, and adaptive tracking:

• Time-based sampling instead of index filtering
  Your current index % 10 == 0 filter is arbitrary and might miss critical movement paths (like fast swipes or precise hover actions). Instead, sample at fixed time intervals (50-100ms is a sweet spot) to capture consistent, meaningful data without flooding the array. Here's an adjusted implementation:

  class UserLog { 
    constructor(){ 
      this.results = { mouseMovements: [] };
      this.lastSampleTime = Date.now();
      this.sampleInterval = 50; // Sample every 50ms
    }
  
    trackMouseMovement(){ 
      document.addEventListener('mousemove', (event) => {
        const now = Date.now();
        if (now - this.lastSampleTime >= this.sampleInterval) {
          this.results.mouseMovements.push({
            timestamp: now,
            x: event.pageX,
            y: event.pageY
          });
          this.lastSampleTime = now;
        }
      }); 
    }
  }
  

• Compress data with relative coordinates
  Instead of storing absolute x/y values every time, store the difference from the last sampled point. This cuts down data size dramatically, especially for slow, steady movements:

  // Inside your mousemove handler
  const lastPoint = this.results.mouseMovements.at(-1);
  this.results.mouseMovements.push({
    timestamp: now,
    dx: event.pageX - (lastPoint?.x || event.pageX),
    dy: event.pageY - (lastPoint?.y || event.pageY)
  });
  

  Your backend can easily reconstruct the full path by accumulating these differences.

• Pause tracking during idle periods
  Stop collecting data if the user hasn't interacted (no mouse movement, clicks, or scrolling) for 30+ seconds. Resume tracking when they become active again—this eliminates unnecessary data collection entirely.

• Cap in-memory data size
  Trigger an immediate send once mouseMovements reaches 50-100 entries, instead of waiting for the timer. This prevents the array from growing to hundreds of entries and causing garbage collection pauses.

(2) Optimal Ajax Frequency & Efficient Alternatives #

Best Send Frequency #

Ditch fixed 10-second intervals—use a hybrid strategy based on data volume and time:

• Send data when either:
  1. The mouseMovements array hits 50-100 entries, or
  2. 15 seconds have passed since the last send (whichever comes first)
• Always send remaining data when the user navigates away from the page (via beforeunload or visibilitychange events) to avoid losing critical session data.

Better Than Traditional Ajax: Use the Beacon API #

Instead of $.ajax, use navigator.sendBeacon()—it's purpose-built for analytics data, runs in the background without blocking the main thread, and works reliably even when the page is unloading:

function sendData(data) {
  const payload = JSON.stringify(data);
  navigator.sendBeacon(endpoint, payload);
  // Clear the array after sending to avoid re-sending data
  this.results.mouseMovements = [];
}

// Hybrid trigger example
window.setInterval(() => {
  if (this.results.mouseMovements.length > 0) {
    sendData(this.results);
  }
}, 15000);

// Send remaining data on page unload
window.addEventListener('beforeunload', () => {
  if (this.results.mouseMovements.length > 0) {
    sendData(this.results);
  }
});

Is Mouse/Scroll Tracking Worth It? #

Click-driven tracking is great for measuring conversions and task completion, but mouse/scroll tracking provides unique UX insights you can't get otherwise:

• It reveals areas of confusion (e.g., users hovering over non-clickable elements, scrolling back and forth looking for content)
• It helps optimize layout (e.g., identifying "dead zones" where users never interact)

That said, you can optimize collection by:

• Prioritizing high-value events: Capture full mouse paths only around interactive elements (buttons, links, forms) instead of the entire page.
• Combining with leaner metrics: Pair mouse data with scroll depth, time on page, and click events to get a complete picture without over-collecting.

内容的提问来源于stack exchange，提问作者Phil Brockman