除Safari外，鼠标X轴控制进度的响应式视频浏览器播放卡顿

这个靠鼠标X轴位置同步视频进度的交互创意挺有意思，但高频触发的mousemove事件直接操作视频currentTime，确实容易在非Safari浏览器里引发卡顿——毕竟mousemove每秒能触发上百次，每次都重复读取视频时长、窗口宽度再修改播放位置，浏览器根本扛不住这么密集的操作。

我整理了几个核心优化方向，以及调整后的代码方案：

关键优化点 #

• 节流控制触发频率：把mousemove的逻辑执行频率限制在和浏览器刷新周期对齐的节奏（比如每16ms一次），避免无意义的高频操作
• 缓存静态变量：视频时长duration、窗口宽度这类不会频繁变化的值，只在初始化或窗口 resize 时获取，不用每次鼠标移动都重新读取
• 用requestAnimationFrame同步操作：让视频进度修改和浏览器重绘周期同步，减少不必要的重排重绘

优化后的代码 #

// 缓存常用DOM和静态变量
const video = document.querySelector(".video1");
let videoDuration = 0;
let windowWidth = window.innerWidth;

// 节流函数：限制函数执行频率
function throttle(func, delay) {
  let lastExecuteTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastExecuteTime >= delay) {
      func.apply(this, args);
      lastExecuteTime = now;
    }
  };
}

// 视频加载完成后获取时长
video.addEventListener("loadedmetadata", function() {
  videoDuration = this.duration;
});

// 窗口大小变化时更新宽度
window.addEventListener("resize", function() {
  windowWidth = window.innerWidth;
});

// 鼠标移动处理逻辑（已节流）
const handleMouseMove = throttle(function(e) {
  if (!videoDuration) return; // 确保视频时长已加载完成
  const mouseX = e.pageX;
  const targetTime = (videoDuration * mouseX) / windowWidth;
  // 同步到浏览器重绘周期再修改进度
  requestAnimationFrame(() => {
    video.currentTime = targetTime;
  });
}, 16); // 约60帧/秒的触发间隔

// 绑定事件
document.addEventListener("mousemove", handleMouseMove);

额外小建议 #

• 如果视频文件体积较大，建议开启预加载或使用分段加载的视频格式（比如HLS），避免因视频加载不及时导致的卡顿
• 可以给currentTime设置加个阈值：当目标时间和当前播放时间差小于0.1秒时就不更新，进一步减少不必要的操作

调整后，非Safari浏览器的卡顿问题应该能得到明显改善，同时也能保持交互的流畅性~

内容的提问来源于stack exchange，提问作者Honzis Novák