Fatal编程技术网

Ruby on rails Rails，Javascript没有被延迟

ruby-on-rails youtube-api stripe-payments

Ruby on rails Rails，Javascript没有被延迟,ruby-on-rails,youtube-api,stripe-payments,ruby-on-rails-6,Ruby On Rails,Youtube Api,Stripe Payments,Ruby On Rails 6,我写了一份报告，结果 在初始页面加载期间，将解析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.strip

我写了一份报告，结果

在初始页面加载期间，将解析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标签的正上方

布局
_head_defer.html.erb
脚本在底部呈现，但我仍然发现上面的问题：

在初始页面加载期间，将解析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)
怎么回事 即使在不支持
defer
的非常旧的浏览器中，推迟javascript解析的常见技术是将
javascript\u include\u标记
移动到页面的最末尾，就在
上方

当使用此方法时-为相应的脚本包含
，以便浏览器可以在解析页面之前开始抓取。

即使在不支持
延迟
的非常旧的浏览器中延迟javascript解析的常见技术是将
javascript\u include\u标记
移动到页面的最后，就在
上方

当使用此方法时-为相应的脚本包含
，以便浏览器可以在解析页面之前开始抓取。

它呈现的是什么？您可以展开您的问题吗？渲染什么？我在javascript标记中添加了defer:defer，但是当我运行gtmetrix.com/report时，它显示它没有被延迟。让我知道如何检查你想要的东西，我会的。当你在源代码处达到峰值时，视图中的HTML输出显示了什么？@JoshBrody如上所述，我添加了RenderReverything，它似乎被正确渲染；根据您在呈现HTML中的评论，这可能是通过Google Maps注入的。它呈现的是什么？您能详细说明您的问题吗？渲染什么？我在javascript标记中添加了defer:defer，但是当我运行gtmetrix.com/report时，它显示它没有被延迟。让我知道如何检查你想要的东西，我会的。当你在源代码处达到峰值时，视图中的HTML输出显示了什么？@JoshBrody如上所述，我添加了RenderReverything，它似乎被正确渲染；根据你在呈现的HTML中的评论，这很可能是通过谷歌地图注入的。接受了你的建议，仍然没有运气阅读你的建议，仍然没有运气 
<%= 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 %>