我正在制作一个简单的网站，并不一定要超级快和高性能，我只关注一些不错的设计元素。这些设计元素之一是模糊，该模糊被应用于在某些容器下“静态”定位的背景，该背景在滚动时会移动。 This example应该是不言自明的。 （我希望可以共享网站本身。这只是一个个人网站，无广告用途。）
这可以通过CSS过滤器以及在容器上移动background-position来完成。但是，背景不是图像而是画布元素。 （目前，它只是重新绘制到画布中的图像，但是它将通过算法生成。）所以我的方法是：模糊容器包含画布作为背景，而背景画布的内容是使用在每个滚动和调整大小事件上应用的过滤器重绘。就像我说的那样，这并不一定要很快，并且可能不会在客户端执行其他复杂的计算，但是流畅的用户体验很重要。
（如果需要，我将提供代码的相关部分。）
我的问题是：我注意到，当使用滚动条滚动时，它呈现得非常流畅，但是当使用鼠标滚轮滚动时，它可能无法足够快地重绘背景，并且看起来好像模糊的背景有点落后。在触摸屏上滑动时，情况甚至更糟，模糊的背景始终落后于实际背景。它在使用滚动条滚动时能够跟上的事实使我认为问题不在于画布重绘方法，而在于处理事件。是否有任何方法可以处理滚动事件，使性能始终与使用滚动条滚动时的性能一样好？也许甚至与性能无关，而是鼠标滚轮和滑动滚动不会频繁触发该事件，从而在不重绘画布时导致这些“间隙”？如果是这样，我可能应该以这种方式来实现重绘，即考虑到滚动事件的增量，并在事件之间多次绘制模糊的背景。