页面 100% 完全加载后在 HTML 中插入和加载脚本文件

Question

这个问题不是仅仅创建和注入脚本文件的简单问题。

我想优化加载谷歌广告脚本文件的网站。

问题：当谷歌广告的脚本文件与 HTML 文件并行加载时，页面加载速度会急剧下降。

我想出的解决方案：我决定在网页 100% 完全加载后（甚至页面 100% 加载后 100-200 毫秒）加载 google ads 的脚本文件

我尝试的解决方案如下：

1. 创建了一个函数来加载脚本文件并使用window.onload = loadGoogleSyndication()。但它实际上是在完整加载 HTML 文档之前加载脚本。 （我可以在网站的速度测试中观察到）

    function loadGoogleSyndication() {
      const googleSyndication = document.createElement('script');
      googleSyndication.type = 'text/javascript';
      googleSyndication.async = true;
      googleSyndication.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
      const script = document.getElementsByTagName('script')[0];
      script.parentNode.insertBefore(googleSyndication, script);
    }
    window.onload = loadGoogleSyndication()
   

2. 其次，我使用了document.onload = loadGoogleSyndication()。但它再次在页面加载完成之前加载文件。

    window.onload = loadGoogleSyndication()

1. window.addEventlister("load", loadGoogleSyndication()) 也有同样的问题

唯一有效的解决方案： 我使用 setTimeout 属性并在 2.5 秒后加载文件，然后它工作了。 （2.5 秒也可以是 2 秒，以实现快速互联网连接）

这行得通？？？？

window.addEventListener("load", function () {
  setTimeout(() => {
    loadGoogleSyndication();
  }, 2500);
}, true);

但除此之外还有什么解决方案可以在 100% HTML 文件加载之后（或 100 毫秒之后）加载脚本？因为使用setTimeout 属性是在黑暗中扔刀，我们完全不知道文件HTML文件加载何时完成。

另一种解决方案是在窗口滚动后加载文件window.onscroll，但我不想使用它。

Answer 1

尝试DOMContentLoaded，它仅在页面中的所有节点都已在 DOM 树中构建时触发。

function loadGoogleSyndication() {
  const googleSyndication = document.createElement('script');
  googleSyndication.type = 'text/javascript';
  googleSyndication.async = true;
  googleSyndication.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
  const script = document.getElementsByTagName('script')[0];
  script.parentNode.insertBefore(googleSyndication, script);
}


window.addEventListener('DOMContentLoaded', loadGoogleSyndication)