网页使用视差效果，滚动时出现卡顿问题。

Question

我正在开发一个带有滚动视差效果 (Stellar.js) 的 网页，其中头部和其他三个部分都使用了该效果。但是，滚动它们会导致卡顿，特别是在页面顶部。

我已经尝试通过压缩背景图像的大小来减少卡顿，但效果不大；去掉模糊效果也没有解决问题（虽然确实减少了卡顿，但仍然不够流畅）。

该网站在 Firefox (W10) 上运行得非常好，几乎没有帧率下降，但在 Chrome (Windows 和 OS X) 和 Safari 上存在一些卡顿。

有一些 JS 滚动触发脚本正在运行，但我不知道它们是否可能是原因。有什么建议吗？

- Spizor

---

其他滚动事件可以进行防抖处理吗？ - shaunsantacruz

我认为是这样的，但是对于这个问题，JS会是什么样子呢？（我在这方面经验不太丰富） - Spizor

Answer 1

您需要做的是对滚动事件进行节流操作，防抖动意味着在一定时间内无法再次触发该事件。而节流意味着该事件只能在一定时间段内触发若干次。

以下是一个用于节流的函数（来源：http://sampsonblog.com/749/simple-throttle-function）：

// Create the listener function
function throttle (callback, limit) {
    var wait = false;                 // Initially, we're not waiting
    return function () {              // We return a throttled function
        if (!wait) {                  // If we're not waiting
            callback.call();          // Execute users function
            wait = true;              // Prevent future invocations
            setTimeout(function () {  // After a period of time
                wait = false;         // And allow future invocations
            }, limit);
        }
    }
 }

要使用它，只需执行以下操作：

function callback () {
    console.count("Throttled");
}

window.addEventListener("scroll", throttle( callback, 200 ));

- winhowes

---

谢谢您的回答！它给了滚动一点速度提升，但仍然有一些延迟。我不知道是否还有其他可以做的。 - Spizor

我通常会关注以下几个方面来评估js性能：图片大小，事件监听器数量，触发事件处理程序的频率（因此我们进行节流），DOM节点数量以及DOM操作的频率。这并不是为了自我推销，但我曾经为视差效果编写过一些源代码，这可能对您有所帮助：https://github.com/winhowes/parallax-container/。 - winhowes