如何在 Liquid 中异步或延迟 JS？答案

【问题标题】：How to async or defer JS in Liquid?如何在 Liquid 中异步或延迟 JS？
【发布时间】：2017-12-14 21:09:29
【问题描述】：

我正在尝试提高网站速度，可能会延迟渲染的一件事是这些脚本：

  {{ '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' | script_tag }}
  {{ 'jGestures.min.js' | asset_url | script_tag }}
  {{ 'modernizr.min.js' | asset_url | script_tag }}

如何使它们异步或延迟？还是我应该简单地将它们移到底部？此外，我还没有对我的主题进行这样的更改。在 Shopify 中还原更改是否容易？如果初始渲染需要任何脚本，我只会将其更改为以前的方式，对吗？

编辑：这些脚本位于 HEAD 部分。

【问题讨论】：

标签： javascript shopify liquid

【解决方案1】：

你必须做一些不同的事情。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" async></script>

<script src="{{ 'jGestures.min.js' | asset_url }}" async></script>

确保复制/下载主题，以便进行备份。还 shopify 存储修订，以便您可以恢复。

【讨论】：