时间戳

首页 > 解决方案 > Rails，Javascript没有被推迟

ruby-on-rails - Rails，Javascript没有被推迟

问题描述

我跑了一份https://gtmetrix.com/报告，结果出现了..

在初始页面加载期间解析 1.2MiB 的 JavaScript。延迟解析 JavaScript 以减少页面呈现的阻塞。

https://www.youtube.com/yts/jsbin/player_ias-abcdefg/en_US/base.js (1.0MiB)
https://www.youtube.com/yts/jsbin/www-embed-player-vfll7K9A4/www-embed-player.js (93.7KiB)
https://js.stripe.com/v3/fingerprinted/js/shared-sdffdw93f1d62sdfsc3f9055e6e24f.js (64.3KiB)
https://js.stripe.com/v3/fingerprinted/js/controller-sdf67c5deede4sdfdc72aa.js (45.2KiB)
https://www.youtube.com/embed/novideoid?controls=1&enablejsapi=1&origin=https%3A%2F%2Fdomain.com&widgetid=1 (3.1KiB of inline JavaScript)

在我的头文件中，我有..

<head>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'%>
  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload', :defer => "defer" %>
  <%= javascript_include_tag 'https://www.youtube.com/iframe_api', :defer => "defer" %>
  <%= javascript_include_tag "https://maps.googleapis.com/maps/api/js?key=ABCDEFG&libraries=places", :defer => "defer" %>
  <%= javascript_include_tag 'https://js.stripe.com/v3/', 'data-turbolinks-track': 'reload', :defer => "defer" %>
</head>

我的脚本没有被推迟有什么问题？

渲染：

<head>
  ... code..

  <link rel="stylesheet" media="all" href="/assets/application-abcdefg.css" data-turbolinks-track="reload">
  <script type="text/javascript" id="www-widgetapi-script" src="https://s.ytimg.com/yts/jsbin/www-widgetapi-abcdefg/www-widgetapi.js" async=""></script><script src="/assets/application-abcdefg.js" data-turbolinks-track="reload" defer="defer"></script>
  <script src="https://www.youtube.com/iframe_api" defer="defer"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=abcdefg&amp;libraries=places" defer="defer"></script>
  <script src="https://js.stripe.com/v3/" data-turbolinks-track="reload" defer="defer"></script>

 <!-- I believe the below gets inserted by the code above, but I may be wrong --> 
 <script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/40/1/common.js"></script>
 <script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/40/1/util.js"></script>
 <script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps/api/js/AuthenticationService.Authenticate?1shttps%3A%2F%2Fdomain.com%2F&amp;abcdefg&amp;callback=_xdc_._abcdefg&amp;key=abcdefg&amp;token=51011"></script>

</head>

更新：

没有意义，我将脚本移到了body标签的正上方...

布局

<html lang="en">
    <%= render 'layouts/head' %>
    <body id='homepage'>  
        <%= render 'home/home_navbar' %>
        <%= render 'home/home_header' %>    
         <%= yield %>
        <%= render 'layouts/footer' %>
    <%= render 'layouts/head_defer' %>
    </body>
</html>

_head_defer.html.erb

<%= javascript_include_tag 'https://www.youtube.com/iframe_api', defer: true %>
<%= javascript_include_tag "https://maps.googleapis.com/maps/api/js?key=abcdrfg&libraries=places", defer: true %>
<%= javascript_include_tag 'https://js.stripe.com/v3/', 'data-turbolinks-track': 'reload', defer: true %>

脚本在底部呈现，但我仍然遇到上面的问题：

在初始页面加载期间解析 1.2MiB 的 JavaScript。延迟解析 JavaScript 以减少页面呈现的阻塞。

到底是怎么回事？！！！

标签： ruby-on-railsyoutube-apistripe-paymentsruby-on-rails-6

解决方案

即使在不支持的非常旧的浏览器中延迟 javascript 解析的常用技术defer是将 移到javascript_include_tag页面的最末尾，就在上面</body>。

使用此方法时 - 包含<link rel="preload" href="yourfile.js" as="script">相应的脚本，以便浏览器可以在页面解析之前开始获取。

推荐阅读