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

Question

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

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

:当google广告脚本文件与HTML文件并行加载时，页面加载速度急剧下降。

解决方案我想到了:我决定在网页100%完全加载后加载google广告的脚本文件(甚至在页面100%加载后100-200毫秒)

我尝试的解决方案如下，详细信息:

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()

3. 同样的问题是window.addEventlister("load", loadGoogleSyndication())

唯一可行的解决方案：我使用setTimeout属性并在2.5秒后加载文件，然后它就工作了。(2.5秒可为2秒，也可用于快速互联网连接)

This works👇

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

但是有任何解决方案，而不是这个脚本加载后(或后100毫秒)100% HTML文件加载?因为使用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)