如何为 Jekyll 页面加载外部脚本？
Sha*_*man 4 javascript asynchronous script-tag jekyll github-pages
我正在 GitHub Pages 上构建 Jekyll 站点。我有一个需要一点 JavaScript 的特定页面。此页面的标题和正文标签由我使用的主题控制。我想在一个外部脚本文件中维护这个 JavaScript，而不是在我的页面中间使用原始脚本。
鉴于现代网络技术，简单地使用异步脚本标签加载文件有什么主要问题吗？一旦页面生成，这个标签就会出现在正文内容中，但据我所知，在正文中不加载外部脚本的建议最初来自加载速度问题，并且对于 async 不再有效。该脚本很小并且控制非关键功能。
基本上：
<body>
...page content...
<script src="/assets/js/myscript.js" type="text/javascript" async=""></script>
...page content...
</body>
我可以覆盖主题布局以直接访问标题并更传统地执行此操作，但如果可能，我想避免这种情况。在 Jekyll 中使用小型一次性脚本还有其他建议吗？
最终，Jekyll Markdown 被转换为标准 HTML，所以这个问题被简化为“async在 HTML 正文中加载小的、非关键的外部脚本是否安全、性能明智？”。
有关显示工作原理的图表，请参阅/sf/answers/2779770661/async。为了清楚起见，我将在下面复制它。它向我们展示了资源的请求与 HTML 解析并行，使得性能下降大致相当于运行内联 JS。因此，如果脚本很小（假设为小，您的意思是它不是资源密集型的，而不是代码长度方面的小），则性能影响将可以忽略不计，无论您将其放在何处。
如果脚本是非关键的，如果可能的话还是最好放在正文的最后，这样关键的 HTML 和其他资源会先加载，因为执行脚本时 HTML 解析仍然会暂停。
Google Chrome Lighthouse 工具可用于指示网页的性能，并显示网页的哪些部分对性能造成最大影响，根据我的经验，这些部分往往是图像。您可以通过打开 Chrome Dev Tools 并转到 Audit 选项卡来使用这些工具。
| 归档时间： |
|
| 查看次数： |
1176 次 |
| 最近记录： |