在頁面加載時將放置在頭部的渲染標簽注入到身體中

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>