Question

我是网络开发的新手，我目前正在为我的投资组合建立自己的网站。我的应用程序使用node，express和Heroku在线启动它。但是，页面并不像我希望的那样顺畅。滚动和查看动画时会丢失很多帧。我想知道我能做些什么来让我的应用程序感觉柔和顺畅。我一直在寻找解决方案，但我对开发来说太新了，不知道该怎么做。我试图使用检查器来查看css或javascript文件是否通过瀑布导程器减慢了进程，但是干涸了。到目前为止，我已压缩文件并降低了所有图像的比例。此外，整个网站都是静态内容，所以我无法想象为什么它的运行速度如此之慢。任何帮助将不胜感激。

The website in question

Answer 1

“滞后”可能是由ScrollFire插件引起的。每次调用Materialize.scrollFire(..)时，实际上都会为“scroll”事件添加一个JavaScript侦听器。您使用它的方式是，为每个目标对象调用Materialize.scrollFire，这样您实际上创建了多个“滚动”侦听器。但是scrollFire选项实际上是一个目标数组，因此您只需初始化一次就可以逃脱。像这样：

var options = [
    {selector: '.iphone1', offset: 300, callback: function(el) {
        $('.iphone1').css('visibility', 'visible');
        $('.iphone1').addClass('animated slideInLeft');
    }},
    {selector: '#paragraph_intro', offset: 300, callback: function(el) {
        $('#paragraph_intro').css('visibility', 'visible');
        $('#paragraph_intro').addClass('animated slideInRight');
    }},
    // ... And so on
];
Materialize.scrollFire(options);

也可能是由您自己的scroll听众引起的：

$(window).on('scroll', function(){
    updateNavigation();
    changeNavColor();
    changeHeaderColor();
});

我会考虑添加某种限制，因此在用户滚动时，这些函数的调用次数会减少。

这可能不是问题，也可能是整个问题，因为我看不到页面在没有它的情况下会如何表现，但它可能会产生影响，因此值得研究。

如何优化我的heroku webapp

1 个答案: