如何提高JS滚动性能？

Question

我正在修改我的网站，新的网站可以在http://beta.namanyayg.com/找到

网站上滚动主要有两件事：

• 要检查用户所在的“页面”，通过计算顶部偏移和滚动位置，然后向页面添加一个类。
• 要在菜单上平滑滚动，请单击。

我已为两者编写代码，但存在很多延迟 。

第一个几乎总是导致滞后。 结果，第二个也是滞后的。 我已经包含了一个布尔值来检查它是否平滑滚动并禁用了正常的滚动事件，但是没有太大的变化。

您对如何提高性能有任何建议吗？因此没有（或至少更少）延迟？ 先感谢您！ :)

......或者它与JS根本没有关系？ 我已经优化了其他一切......

编辑： 未经授权的JS， 网址为http://beta.namanyayg.com/js/main.js

Answer 1

如果你使用下划线 ，它有一个很棒的_.debounce函数，非常适合这种事情。

Answer 2

要检查用户从页面顶部滚动了多少（即他当前在哪个“页面”），可以通过以下方式实现：

$(window).scroll(function () { 
    var scrollAmount = $(window).scrollTop(); // in pixels

    if(scrollAmount > SOME_AMOUNT)
    {
       // add required css class
    }
});

要平滑滚动，例如某个id，您可以使用：

$("html, body").animate({ scrollTop: $("#someID").scrollTop() }, 1000);

这些都是jQuery解决方案，所以你应该包含jquery库。 还有一个很好的jQuery插件叫做路点 ，可以执行这些计算。 它可能对您有用，它还有一些其他不错的功能和示例。

Answer 3

我也有同样的问题。 我有一个可滚动的div，有数千个较小的div。 每次我调用scrollTop来获取滚动位置或设置它时，它有时会等待至少1秒钟。

我读了这些幻灯片： http ：//www.slideshare.net/nzakas/high-performance-javascript-2011（特别是幻灯片138-139），现在我意识到每次调用scrollTop，即使是作为一个getter，也会让javascript重新启动页。 这很可能是延迟的原因，但不幸的是我还没有找到解决方案，因为在调用scrollTop的同时不会导致重新布局。

注意：我只在Chrome上测试过。

另请阅读本文的“浏览器很聪明”部分： http ： //www.phpied.com/rendering-repaint-reflowrelayout-restyle/

Answer 4

通过获取scrollTop，我找到了一个简单的滞后解决方案，只需在滚动处理程序中调用它并将结果保存在变量中。

例如在jQuery中：

var scrollPos = 0,
    element = $('.class');

element.scroll(function(){
    scrollPos = element.scrollTop();  
});

对于第二个问题，设置scrollTop，我通过仅显示可见元素来减少DOM元素的数量。 在您的情况下，请确保仅将可见页面添加到DOM。 当滚动到下一页时，在滚动处理程序中删除顶部的一个（使用jQuery .detach）并将下一个附加到DOM。