Chrome/Firefox反复设置HTML5 video的currentTime卡顿，Safari正常

你遇到的这个问题，既有不同浏览器的性能策略差异，也存在代码层面可以优化的空间，下面具体拆解：

一、浏览器行为差异是核心原因 #

Mac的触控平滑滚动在不同浏览器里的事件处理逻辑不一样：

• Safari对scroll事件的触发非常激进，哪怕是惯性滚动过程中，也会持续、高频地派发事件，所以视频能实时跟随滚动更新。
• Chrome和Firefox为了避免主线程被高频事件阻塞，会对惯性滚动中的scroll事件做合并优化——它们不会在滚动的每一瞬间都触发事件，而是等惯性滚动减速到接近停止时，才批量处理事件回调。这就导致你看到的“只有滚动结束才更新画面”的现象。

而降低视频分辨率后，视频解码和渲染的CPU/GPU开销大幅降低，浏览器的主线程压力变小，就能更及时地处理scroll事件回调，动画自然就流畅了。

二、代码层面的优化建议 #

针对Chrome和Firefox的表现，你可以通过以下方式提升流畅度：

1. 用requestAnimationFrame节流scroll事件 #

scroll事件的触发频率极高（每秒可能几十上百次），直接在回调里更新video.currentTime会给主线程带来不小压力。把更新逻辑放到requestAnimationFrame里，让浏览器在每次重绘前统一处理，能减少不必要的计算：

var total, video;
window.onload = function() {
 video = document.getElementById("video");
 total = video.scrollHeight/2 + document.getElementById('top').scrollHeight;
 // 建议添加passive属性优化滚动性能
 window.addEventListener("scroll", animateGoat, { passive: true });
};

function animateGoat() {
  // 委托给requestAnimationFrame处理
  requestAnimationFrame(updateVideoProgress);
}

function updateVideoProgress() {
 const scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
 video.currentTime = scroll <= total ? 2 * scroll / total : 2;
}

2. 启用passive事件监听器 #

在添加scroll事件时，加上{ passive: true }选项，告诉浏览器这个回调不会调用preventDefault()，让浏览器可以放心地优化滚动动画，避免不必要的延迟。

3. 优化视频本身 #

• 选择高效的编码格式（比如H.264或AV1），减少解码开销；
• 给video标签添加preload="auto"，让浏览器提前加载视频数据，避免播放时的加载卡顿；
• 如果不需要极高清晰度，可以保持较低的分辨率（比如你测试的600px），这是最直接降低渲染压力的方式。

总结 #

本质上是不同浏览器对滚动事件的调度策略和性能优先级不同，高分辨率视频的渲染开销又放大了这种差异。通过上述代码优化和视频调整，你应该能在Chrome和Firefox里获得更接近Safari的流畅滚动体验。

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