如何优化我的heroku webapp

我是networking开发新手，目前正在为我的投资组合build立自己的网站。 我的应用程序使用node，express和Heroku在线启动它。 不过，这个页面并不像我希望的那样平滑。 滚动和查看animation时，会丢失大量的帧。 我想知道我可以做些什么来使我的应用程序感觉顺畅。 我已经四处寻找解决scheme，但是我太新，以至于无法真正理解要做什么。 我试图用检查器来查看css或javascript文件是否通过瀑布insepctor减缓进程，但干了。 到目前为止，我已经压缩了文件并降低了所有图像的比例。 另外，整个网站是静态内容，所以我无法想象为什么它的运行如此缓慢。 任何帮助将非常感激。

有问题的网站

Answer 1

“滞后”可能是由ScrollFire插件引起的。 每次调用Materialize.scrollFire(..) ，实际上都会为“滚动”事件添加一个JavaScript侦听器。 你使用它的方式，你调用每个目标对象的Materialize.scrollFire ，所以你实际上创build了多个“滚动”的监听器。 但是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(); }); 

我会考虑添加某种限制，所以这些function在用户滚动时被称为不太频繁。

这些可能不是问题，也不是整个问题，因为我看不到没有它的页面会有什么样的performance，但这可能会产生影响，所以值得研究。