网页按键时长可靠边界及Chrome高精度打字数据采集方案咨询

这确实是事件驱动采集打字数据时的典型痛点——CPU繁忙会拖慢keydown事件的触发时机，导致计算出的按键间隔出现几十甚至上百毫秒的离谱误差。下面给你几个在Chrome里完全可行的优化方案，从简单的异常值过滤到接近你想要的主动检测思路都有：

1. 给现有事件驱动代码加基础异常过滤 #

先从你现有的代码入手，做几个关键优化就能过滤大部分异常：

• 排除按住按键触发的重复事件（e.repeat）
• 用performance.now()替代new Date().getTime()，它是浏览器提供的高精度时间戳，不受系统时间调整影响，精度能到微秒级
• 基于人类打字的生理/硬件限制，设置合理的间隔阈值（比如正常连续打字的间隔不会低于20ms，也很少会超过1秒）

修改后的代码如下：

<!DOCTYPE html>
<html>
<body>
  <input id="in">
  <p id="out">new</p>
  <script>
    let downLast = 0;
    // 可根据实际场景调整的阈值：人类连续打字的合理间隔范围
    const MIN_VALID_INTERVAL = 20;
    const MAX_VALID_INTERVAL = 1000;

    document.getElementById("in").onkeydown = function(e) {
      // 跳过按住按键时的重复触发事件
      if (e.repeat) return;
      
      const currentTime = performance.now();
      if (downLast !== 0) {
        const interval = currentTime - downLast;
        // 只保留在合理范围内的间隔值
        if (interval >= MIN_VALID_INTERVAL && interval <= MAX_VALID_INTERVAL) {
          document.getElementById("out").innerHTML += "," + Math.round(interval);
        } else {
          console.log("过滤异常间隔：", interval + "ms");
        }
      }
      downLast = currentTime;
    };
  </script>
</body>
</html>

2. 用requestAnimationFrame实现类主动检测的方案 #

如果你更倾向于主动检测而非被动监听事件，可以结合requestAnimationFrame（浏览器以约60fps的频率触发，即每16ms一次）来同步按键状态，减少事件延迟的影响。核心思路是用事件记录按键的按下/释放状态，再用主动采样来校准时间：

<!DOCTYPE html>
<html>
<body>
  <input id="in">
  <p id="out">new</p>
  <script>
    const inputEl = document.getElementById("in");
    // 记录每个按键的按下时间
    const activeKeys = new Map();
    let lastValidKeyUpTime = null;

    function getHighResTime() {
      return performance.now();
    }

    // 监听按键按下，记录起始时间
    inputEl.addEventListener("keydown", (e) => {
      if (e.repeat) return;
      activeKeys.set(e.key, getHighResTime());
    });

    // 监听按键释放，计算间隔并过滤异常
    inputEl.addEventListener("keyup", (e) => {
      const pressStartTime = activeKeys.get(e.key);
      if (!pressStartTime) return;

      const pressDuration = getHighResTime() - pressStartTime;
      // 先过滤按键按住时长的异常（比如按住超过2秒肯定不是正常打字）
      if (pressDuration >= 10 && pressDuration <= 2000) {
        if (lastValidKeyUpTime) {
          const interval = getHighResTime() - lastValidKeyUpTime;
          if (interval >= 20 && interval <= 1000) {
            document.getElementById("out").innerHTML += "," + Math.round(interval);
          }
        }
        lastValidKeyUpTime = getHighResTime();
      }
      activeKeys.delete(e.key);
    });

    // 主动检测：定期清理异常的按键状态（防止事件丢失导致状态残留）
    function syncKeyStates() {
      const now = getHighResTime();
      for (const [key, startTime] of activeKeys.entries()) {
        // 超过5秒未释放的按键，视为异常状态并清理
        if (now - startTime > 5000) {
          activeKeys.delete(key);
        }
      }
      requestAnimationFrame(syncKeyStates);
    }
    syncKeyStates();
  </script>
</body>
</html>

3. 进阶：基于统计的自适应异常过滤 #

如果固定阈值不够灵活，可以用滑动窗口保存最近的N个有效间隔值，计算中位数或均值，过滤偏离统计值过多的异常点，这样能自适应不同用户的打字速度：

// 滑动窗口保存最近5个有效间隔值
const intervalWindow = [];
const WINDOW_SIZE = 5;

function isIntervalValid(interval) {
  if (intervalWindow.length < WINDOW_SIZE) {
    // 窗口未满时，先加入并视为有效
    intervalWindow.push(interval);
    return true;
  }
  // 计算窗口内的中位数
  const sortedIntervals = [...intervalWindow].sort((a, b) => a - b);
  const median = sortedIntervals[Math.floor(WINDOW_SIZE / 2)];
  // 允许±200%的偏差（可调整）
  const lowerBound = median * 0.3;
  const upperBound = median * 3;
  
  if (interval >= lowerBound && interval <= upperBound) {
    // 替换窗口中最旧的数值
    intervalWindow.shift();
    intervalWindow.push(interval);
    return true;
  }
  return false;
}

你可以把这个函数集成到前面的代码中，替换原来的固定阈值判断逻辑。

最后总结下核心优化思路 #

在无法控制客户端CPU负载的情况下，要提升采集可靠性，关键要做到：

• 优先用performance.now()获取高精度时间戳
• 过滤掉重复按键、明显超出人类生理范围的异常值
• 用主动采样（requestAnimationFrame）补充事件驱动的不足，防止事件丢失或延迟
• 可选用统计方法自适应不同用户的打字习惯

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