如何提高JS的滚动性能

How to improve JS scroll performance?

本文关键字：滚动 性能 JS 何提高      更新时间：2023-09-26

我正在改造我的网站，新的一个可以在http://beta.namanyayg.com/

网站上与滚动相关的内容主要有两个:

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

我已经为两者写了代码，但是有很多延迟。

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

你有什么建议，如何提高性能，使没有(或至少，少)延迟?提前感谢!:)

…或者它与JS根本没有关系?我已经优化了其他所有内容…

EDIT: Unminified JS at http://beta.namanyayg.com/js/main.js

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

检查用户从页面顶部滚动了多少(即他目前在哪个"页面"上)，可以使用:

$(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插件叫做waypoints，它可以执行这些计算。它可能对您很有用，它还有一些其他很好的特性和示例。

我有同样的问题。我有一个可滚动的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/

我找到了一个简单的解决方案来获得scrollTop的滞后，只是调用它内部的滚动处理程序，并保存在一个变量的结果。

，例如jQuery中的

var scrollPos = 0,
    element = $('.class');
element.scroll(function(){
    scrollPos = element.scrollTop();  
});

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

相关文章：