Question

我有一个Ruby on Rails应用程序。对于我的观点，我正在使用react-rails gem。我想通过Google PageSpeed改进pagespeed。我的主要问题是删除Render-Blocking JavaScript ，所以我在我的javascript_include_tag帮助方法中添加了async：true。然后，当我刷新网站时，我在控制台中有这些消息的空白白窗口浏览器：

ReferenceError: $ is not defined
   $(document).ready(ready);
ReferenceError: jQuery is not defined
   }(jQuery);

ReferenceError: jQuery is not defined
   })( jQuery );

ReferenceError: React is not defined
    this.About = React.createClass({

我的applicaton.js文件：

//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require react
//= require react_ujs
//= require semantic-ui
//= require components
//= reqiore custom
//= require_tree .

var ready;
ready = function() {

};

$(document).ready(ready);
$(document).on('page:load', ready);

我需要做些什么才能删除阻止javascript？

Answer 1

由于页面上几乎所有内容都依赖于JQuery，因此任何成功的页面呈现都需要加载JQuery才能启动。因此根据我的经验，无法阻止Javascript。

从用户的角度来看，为防止JQuery阻塞而付出大量工作可能会允许加载DOM，但是在Jquery和所有相关插件作为DOM加载之后它可能会大量跳转被重写，使得体验比页面负载稍长一些更糟糕。

总的来说，我的工作重点是确保您的JQuery和所有相关的JS和CSS文件都是通过CDN提供的，这样您就可以从第二个域并行地向您的主要用户提取HTTP，并确保您不做任何事情来破坏JQuery和其他资产的浏览器缓存，以便它们不会阻止后续请求。

修改

我还要提一下，使用预编译的资产进行测试是值得的（如果使用CDN，这仍然是必要的），使用
关闭缺失项目的资产实时编译
config.assets.compile = false

这样可以防止任何丢失的资产造成令人困惑的延迟，并且可能会在您生效后进行无效的编辑。

有关从您的网络服务器提供资源的其他说明：

根据http://guides.rubyonrails.org/asset_pipeline.html


4.1.1远期过期标题

预编译资产存在于文件系统中，并由其直接提供   你的网络服务器。默认情况下，它们没有远期标头，所以   获得指纹识别的好处，您将不得不更新您的服务器   用于添加这些标头的配置。

对于Apache：

# The Expires* directives requires the Apache module # `mod_expires` to be enabled. <Location /assets/> # Use of ETag is discouraged when Last-Modified is present Header unset ETag FileETag None # RFC says only cache for 1 year ExpiresActive On ExpiresDefault "access plus 1 year" </Location>


对于NGINX：

location ~ ^/assets/ { expires 1y; add_header Cache-Control public; add_header ETag ""; break; }

最后，确保测试在模拟最终生产环境的服务器上运行，因为Rails开发服务器不会提供相同的响应。

使用react-rails gem

1 个答案: