如何为 Jekyll 页面加载外部脚本？
How to load an external script for a Jekyll page?
我正在 GitHub 页面上构建一个 Jekyll 站点。我有一个特定的页面需要一点 JavaScript。这个页面的 header 和 body 标签由我使用的主题控制。我想在外部脚本文件中维护这个 JavaScript 而不是在我的页面中间使用原始脚本。
鉴于现代网络技术，仅使用异步脚本标记来加载文件是否有任何主要问题？一旦页面生成，这个标签就会出现在正文内容中，但据我所知，不在正文中加载外部脚本的建议最初来自加载速度问题，并且对于异步不再有效。该脚本很小，控制非关键功能。
基本上：
<body>
...page content...
<script src="/assets/js/myscript.js" type="text/javascript" async=""></script>
...page content...
</body>
我可以覆盖主题布局以直接访问页眉并以更传统的方式执行此操作，但我想尽可能避免这种情况。是否有其他建议将小型一次性脚本与 Jekyll 一起使用？
最终，Jekyll markdown 被转换为标准 HTML，因此本题简化为 "Is it safe, performance-wise, to load small, non-critical async external scripts in the HTML body?"。
有关显示 async 工作原理的图表，请参阅 。为了清楚起见，我将在下面复制它。它向我们展示了资源是与 HTML 解析并行请求的，使得性能损失大致相当于 运行 内联 JS。因此，如果脚本很小（假设小，意思是它不是资源密集型的，而不是代码长度小），无论你把它放在哪里，对性能的影响都可以忽略不计。
如果脚本是非关键的，如果可能的话还是最好放在body的末尾，这样关键的HTML等资源先加载，因为HTML 执行脚本时解析仍然暂停。
GoogleChromeLighthouse 工具可用于指示网页的性能，并显示网页的哪些部分对性能造成的影响最大，哪些在我的经验往往是图像。您可以通过打开 Chrome 开发工具并转到“审核”选项卡来使用这些工具。
我正在 GitHub 页面上构建一个 Jekyll 站点。我有一个特定的页面需要一点 JavaScript。这个页面的 header 和 body 标签由我使用的主题控制。我想在外部脚本文件中维护这个 JavaScript 而不是在我的页面中间使用原始脚本。
鉴于现代网络技术，仅使用异步脚本标记来加载文件是否有任何主要问题？一旦页面生成，这个标签就会出现在正文内容中，但据我所知，不在正文中加载外部脚本的建议最初来自加载速度问题，并且对于异步不再有效。该脚本很小，控制非关键功能。
基本上：
<body>
...page content...
<script src="/assets/js/myscript.js" type="text/javascript" async=""></script>
...page content...
</body>
我可以覆盖主题布局以直接访问页眉并以更传统的方式执行此操作，但我想尽可能避免这种情况。是否有其他建议将小型一次性脚本与 Jekyll 一起使用？
最终，Jekyll markdown 被转换为标准 HTML，因此本题简化为 "Is it safe, performance-wise, to load small, non-critical async external scripts in the HTML body?"。
有关显示 async 工作原理的图表，请参阅 。为了清楚起见，我将在下面复制它。它向我们展示了资源是与 HTML 解析并行请求的，使得性能损失大致相当于 运行 内联 JS。因此，如果脚本很小（假设小，意思是它不是资源密集型的，而不是代码长度小），无论你把它放在哪里，对性能的影响都可以忽略不计。
如果脚本是非关键的，如果可能的话还是最好放在body的末尾，这样关键的HTML等资源先加载，因为HTML 执行脚本时解析仍然暂停。
GoogleChromeLighthouse 工具可用于指示网页的性能，并显示网页的哪些部分对性能造成的影响最大，哪些在我的经验往往是图像。您可以通过打开 Chrome 开发工具并转到“审核”选项卡来使用这些工具。