Firefox 52 javascript 滚动火灾事件滞后答案

【问题标题】：Firefox 52 javascript scroll fire events lagFirefox 52 javascript 滚动火灾事件滞后
【发布时间】：2018-01-26 20:23:52
【问题描述】：

自从引入 FF 52 以来，我在执行滚动事件时遇到了同样的滞后问题，尤其是在使用鼠标滚轮时 - 同样的事情也发生在 IE Edge 上，但它被认为是少数，现在有了添加 FF 必须找到某种解决方案。

我在网上创建了一个小提琴来复制该问题 - 该问题在 FF 和 IE edge 上可见，而它在 webkit 浏览器中运行顺畅。

这是我正在使用的简单滚动功能：

$('.scrollable').on('scroll', function() {
  scrollY = $(this).scrollTop();
  $(this).find('td:first-child span').attr('style', 'transform:translateY(' + -scrollY + 'px)');
})

https://jsfiddle.net/nfmLa7mn/3/

如果您使用鼠标滚轮滚动，问题会更加明显。这是一个小的滞后，但它就在那里。在更复杂的布局中，这个问题更加明显。

只有我一个人对此感到困扰吗？我还没有在网上看到任何其他类似的主题。有什么我不知道可以以更好的方式触发滚动事件的方法吗？或者有没有其他方法可以解决这个问题？

【问题讨论】：

你应该经常throttle或debounce这种事件。
@TimVermaelen 限制或消除表格滚动？真的很糟糕的用户体验......
是的，我不是在看你在滚动什么……一个表格，整个页面……没关系。我说的是事件快速触发并每秒 100 次计算你的逻辑......
@TimVermaelen 看起来我误解了节流的工作原理。滞后现在是诱发而不是仅仅发生，但这可能是一个很好的方法。
它应该为手机等速度较慢的设备打开更多内存。说到记忆，我这边一点也不落后。在 Chrome、FF、IE 中测试。 Chrome 使用 V8 引擎来优化性能。因此，如果另一个进程正在减慢它的速度，这对您来说确实有意义。

标签： javascript jquery css firefox

【解决方案1】：

这可能是因为 Firefox 异步处理滚动。

https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Scroll-linked_effects

滚动效果通常是通过监听滚动事件，然后以某种方式（通常是 CSS 位置或变换属性）更新页面上的元素来实现的。[...]

这些效果在滚动在浏览器主线程上同步完成的浏览器中运行良好。但是，大多数浏览器现在都支持某种异步滚动，以便为用户提供一致的每秒 60 帧的体验。在异步滚动模型中，视觉滚动位置在合成器线程中更新，并且在滚动事件在 DOM 中更新并在主线程上触发之前对用户可见。这意味着实现的效果会稍微落后于用户看到的滚动位置。这可能会导致效果滞后、卡顿或紧张——简而言之，这是我们想要避免的。

【讨论】：