Javascript 使用滚动条、滚轮和滑动滚动时的滚动事件性能

我正在制作一个简单的网站，它不需要超快速和高性能，我只关注一些好的设计元素。其中一个设计元素是模糊，它应用于某些容器下的静态背景，这些容器在滚动时会移动。应该是不言自明的。（我希望可以分享网站本身。这只是一个个人网站，没有广告。）

这可以通过CSS过滤器和容器上一些移动的背景位置来实现。但是，背景不是图像，而是画布元素。（目前，它只是一幅重绘到画布中的图像，但会通过算法生成。）因此，我的方法是：模糊的容器包含一块画布作为背景，背景画布的内容会通过在每个滚动和调整大小事件上应用的过滤器重绘。正如我所说的，这不需要很快，而且可能不会在客户端执行其他复杂的计算，但是平滑的用户体验很重要

（如果需要，我将提供代码的相关部分。）

---

我的问题是：我注意到，当使用滚动条滚动时，渲染非常平滑，但当使用鼠标滚轮滚动时，它可能无法足够快地重新绘制背景，并且看起来模糊的背景有点落后。当在触摸屏上滑动时，情况会变得更糟，模糊的背景总是在实际背景后面。当使用滚动条滚动时，它能够跟上的事实使我认为问题不在于画布重画方法，而在于处理事件。有没有办法处理滚动事件，使其性能始终与使用滚动条滚动时一样好？也许这与性能无关，但鼠标滚轮和滑动滚动不会频繁触发事件，这会在画布未重新绘制时导致这些“间隙”？如果是这样的话，我可能应该以这样的方式实施重画，它解释了滚动事件的增量，只是在事件之间绘制了几次模糊的背景。

去抖动/限制：也许你可以缓存一些变量：我在“重画图像之前计算位置”时遇到了类似的问题。如果它不需要与背景图像对应，事情会更简单。最后，您可以通过chrome开发工具

performance

tab>record>scroll浏览网站，或者在

source

tab中执行一些操作>停止>检查js文件，查看一些行需要多长时间。谢谢。这些优化的目标正是我在代码中所做的事情——一堆事件处理程序和许多与布局相关的函数。我会尝试一下，并根据结果进行更新。去抖动/节流：也许你可以缓存一些变量：在“重画图像之前计算位置”时，我会遇到类似的问题。如果它不需要与背景图像对应，事情会更简单。最后，您可以通过chrome开发工具

performance

tab>record>scroll浏览网站，或者在

source

tab中执行一些操作>停止>检查js文件，查看一些行需要多长时间。谢谢。这些优化的目标正是我在代码中所做的事情——一堆事件处理程序和许多与布局相关的函数。我将尝试并更新结果。