滚动时视差滞后的网页

Question

我目前正在开发一个网页上的标题滚动视差效果（Stellar.js）和网站的其他三个部分：然而，滚动它们导致的滞后，尤其是在页面的顶部。

我已经尝试通过使用压缩来减少背景图像的大小，但它并没有产生太大的差别; 去除模糊效果也没有解决问题（它确实减少了延迟，但它仍然不够平滑）。

该网站在Firefox（W10）上运行良好，几乎没有帧丢失，但Chrome（Windows和OS X）和Safari都有一些滞后。

有几个JS滚动触发的脚本正在运行，但我不知道这些是否可能是原因。 有什么建议？

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 ));