Question

我正在限制滚动事件：

window.addEventListener('scroll', throttle(() => {
    console.log('scroll event triggered with throttle');
}, 150));

因为我不希望滚动事件在某人滚动时每秒触发100次，所以我用lodash限制功能限制了它。

我已经阅读过很多文章，这些文章谈到这样做是出于显而易见的性能原因，但没有人谈论在油门上以毫秒为单位设置的数量。

当然这可能取决于用例以及在节流中实际执行的代码。在我的情况下，我正在进行视口检查以查看视口内是否还有东西。

你会如何尝试在毫秒内找到合适的数量？当然我希望尽可能低，因为它会在无限滚动时更快地激发AJAX请求，但我也不想导致性能问题。

在高端桌面上进行测试很困难，因为我可能永远不会遇到性能问题。

一个相当广泛的问题，但我很想知道（最好是在chrome中），如果可以在最坏的情况下进行分析。

Answer 1

我建议你使用IntersectionObserver。仍然会有性能方面的考虑，但如果您只想检查内容是否可见，这是相对较快的操作 - 观察者会在 IntersectionObserverEntry 上为您提供此信息。

在做一些动画时，尽量将你的动画帧率设定为 60fps（每 16ms 一帧）并使用。如果您想处理方向更改或调整大小，我建议延迟 450 毫秒（根据经验计算 iPad 上方向更改的持续时间，在我们的实验中，这是所有测试设备中的最大值）。

至于测试，基于铬的浏览器允许您节流 CPU：

我不确定它是否在其他浏览器中可用。

在任何情况下，使用 requestAnumationFrame（用于动画）或 requestIdleCallback（用于计算）推迟代码执行可能是个好主意。这将有助于在一定程度上避免瓶颈。