有没有什么JavaScript事件可以告诉我们主线程什么时候空闲？

Question

document.addEventListener("pageBecomesInteractive", function()
{
   alert("page is interactive");
};

基本上，我想在main is线程完成解析、计算并足够自由地接受用户输入时执行上面的函数。有没有什么javascript事件可以捕获交互事件或者其他方式呢？

UseCase:我有一个网站，其中包含多个外部javascript文件，如gtm.js，谷歌分析，一些跟踪js文件，gpt.js等。我的网站的JS加载事件在最大2秒内被调用，但由于以上所有脚本的执行，页面在8-10秒后变得交互。因此，我分析了导致延迟的原因，并确定了页面第一个折叠中的Google广告花费了1-3秒(加载此广告需要时间)。

我在想的是，如果我加载谷歌广告发布互动事件的几秒钟，也许我可以节省这1-3秒(这是由于谷歌广告我的互动时间)。

我期待着灯塔性能的提升，因为我的互动时间可能会更少。这只是我的假设。如果我说错了，请纠正我

Answer 1

您可以使用DOMContentLoaded。As MDN documentation says

在完成加载和解析初始

文档时，无需等待样式表、图像和子帧完成加载，就会触发DOMContentLoaded事件。

function doSomething() {
  console.info('DOM loaded');
}

if (document.readyState === 'loading') {  // Loading hasn't finished yet
  document.addEventListener('DOMContentLoaded', doSomething);
} else {  // `DOMContentLoaded` has already fired
  doSomething();
}