在其他标签中同时加载其他网站时,我无法弄清楚为什么平滑滚动会滞后。
例如,在http://www.feedrover.com/上,如果您点击多篇文章链接,该网站的平滑滚动将会严重滞后,而其他文章会加载。这不应该发生,因为应该完成feed for的javascript?
有关如何解决此问题的任何想法?
答案 0 :(得分:1)
来自MDN的解决方案:
由于滚动事件可以以高速率触发,因此事件处理程序不应执行计算上昂贵的操作,例如DOM修改。相反,建议使用requestAnimationFrame,setTimeout或customEvent来限制事件,如下所示:
(function() {
var throttle = function(type, name, obj) {
var obj = obj || window;
var running = false;
var func = function() {
if (running) { return; }
running = true;
requestAnimationFrame(function() {
obj.dispatchEvent(new CustomEvent(name));
running = false;
});
};
obj.addEventListener(type, func);
};
/* init - you can init any event */
throttle ("scroll", "optimizedScroll");
})();
// handle event
window.addEventListener("optimizedScroll", function() {
console.log("Resource conscious scroll callback!");
});