代码之家 › 专栏 › 技术社区 › Toki

如何减少javascript滚动/CSS转换中的FPS下降

gsap frame-rate jquery javascript

Toki · 技术社区 · 5 年前

我已经陷入了性能分析和优化的兔子洞,我无法降低帧速率的下降,这应该是一个相当轻量级的转换,尽管我怀疑这是在卷轴上的事实,尽管它可能是节流的责任?

我想要实现的就是这种简单的慢/平滑滚动效果,如下所示: JSFiddle

w = $(window);
b = $('body');
c = $('#container');

$(document).ready(function() {

    w.scroll(function() {
        c.css('transform','translateY(' + -w.scrollTop() + 'px)');
    });

});

CSS

html, body { margin: 0; }

body {
    height: 500vh;
}

#container {
    display: block;
    position: fixed;
    height: 500vh;
    width: 100vw;
    background: #814e4e;
    padding: 20%;

    font-size: 30px;
    line-height: 45px;
    color: #fff;
    text-align: center;

    transform: translate3d(0,0,0);
    will-change: transform;
    transition: transform 1.5s ease-out;
}

HTML格式

<body>
  <div id="container">
      <p>Lorem ipsum...</p>
  </div>
</body>

我把油门功能从下划线.js,以及在GSAP中重写整个内容,在所有情况下,在不同程度上,平均FPS下降10-20。令人惊讶的是,节流jquery版本在scroll函数上并没有比普通jquery有很大的改进,而GSAP版本使用了新的scroll trigger插件,比上述任何一个都不那么流畅。任何关于这个或其他推荐方法的建议我都将不胜感激!