Rails, Javascript не откладывается - PullRequest
Новая
       35

Rails, Javascript не откладывается

1 голос
/ 20 февраля 2020

Я запустил отчет 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 ...

layout 

<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, чтобы уменьшить блокировку отображения страницы.

ЧТО ПРОИСХОДИТ? !!!

1 Ответ

0 голосов
/ 20 февраля 2020

Обычный способ отложить анализ javascript даже в очень старых браузерах, которые не поддерживают defer - это переместить javascript_include_tag в самый конец страницы, чуть выше </body>.

При использовании этого метода - включайте <link rel="preload" href="yourfile.js" as="script"> для соответствующих сценариев, чтобы браузер мог начать выборку до анализа страницы.

...