在页面加载时将放置在头部的渲染标签注入到身体中

Question

在一个 shopify 项目中，我有一个片段可以呈现一些 HTML、CSS 和一小段 JS（大约 50 行），这些都位于该片段文件中。

如果我将此代码段放在 head 标记中，它不会影响性能。 （在移动设备上大约 45 个）但是，当您查看开发工具时，在 head 标签中放置一个渲染片段会导致所有 head 标签代码被注入到 body 中。

如果我将渲染片段放在结束的正文标记之前，性能会显着下降。 （手机30左右）

我不确定这个的解决方法？ 我正在考虑尝试做这样的事情。 渲染片段会留在头部，但在页面加载或其他情况下被注入主体，看看这是否会阻止开发工具将所有头部代码放入主体，同时也不影响性能。

<script type="text/javascript">
    var script = document.createElement('script');
    script.setAttribute('src', 'http://yourdomian.com/your_script.js');
    script.setAttribute('type', 'text/javascript');
    document.getElementsByTagName('body')[0].appendChild(script);
</script>

Answer 1

您可以使用 scroll jQuery 事件加载脚本，这不会影响站点速度。

当您执行第一次滚动时，脚本会自动添加。

<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script>
$(window).one("scroll", function() {
  var script = document.createElement('script');
  script.setAttribute('src', 'http://yourdomian.com/your_script.js');
  script.setAttribute('type', 'text/javascript');
  document.getElementsByTagName('body')[0].appendChild(script);
});
</script>