时间戳

首页 > 解决方案 > 如何为 Jekyll 页面加载外部脚本？

javascript - 如何为 Jekyll 页面加载外部脚本？

问题描述

我正在 GitHub Pages 上构建一个 Jekyll 站点。我有一个需要一点 JavaScript 的特定页面。此页面的页眉和正文标签由我使用的主题控制。我想在外部脚本文件中维护这个 JavaScript，而不是在我的页面中间使用原始脚本。

鉴于现代网络技术，简单地使用异步脚本标签来加载文件是否有任何重大问题？生成页面后，此标签将出现在正文内容中，但据我所知，建议不要在正文中加载外部脚本最初来自加载速度问题，并且在某种程度上不再适用于异步。该脚本很小并且控制非关键功能。

基本上：

<body>
  ...page content...
  <script src="/assets/js/myscript.js" type="text/javascript" async=""></script>
  ...page content...
</body>

我可以覆盖主题布局以直接访问标题并以更传统的方式执行此操作，但如果可能的话，我想避免这种情况。在 Jekyll 中使用小型一次性脚本是否还有其他建议？

标签： javascriptasynchronousjekyllgithub-pagesscript-tag

解决方案

最终，Jekyll markdown 被转换为标准 HTML，所以这个问题被简化为“在 HTML 正文中加载小的、非关键的async外部脚本是否安全、性能方面？”。

有关显示如何工作的图表，请参阅https://stackoverflow.com/a/39711009async。为了清楚起见，我将在下面复制它。它向我们展示了资源是与 HTML 解析并行请求的，这使得性能损失大致相当于运行内联 JS。因此，如果脚本很小（假设很小，您的意思是它不是资源密集型的，而不是代码长度方面的小号），无论您将它放在哪里，性能影响都可以忽略不计。

如果脚本是非关键的，如果可能的话，最好还是放在body的最后，这样关键的HTML和其他资源会先加载，因为在执行脚本的时候，HTML解析仍然会暂停。

在此处输入图像描述

Google Chrome Lighthouse 工具可用于指示网页的性能，并显示网页的哪些部分对性能造成的影响最大，根据我的经验，这往往是图像。您可以通过打开 Chrome 开发工具并转到审核选项卡来使用这些工具。

推荐阅读