Question

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

基本上，我想在主线程完成分析，求值并变得足够自由以接受用户输入时执行上述功能。是否有捕获交互式事件的任何javascript事件或执行此操作的任何其他方式？

UseCase：我有一个网站，其中包含多个外部javascript文件，例如gtm.js，google Analytics，一些跟踪js文件，gpt.js等。我的网站的JS加载事件在最多2秒内被调用，但是页面由于执行了上述所有脚本，因此在8到10秒后变为交互式。因此，我分析了造成此延迟的原因，并确定了页面第一页中显示的Google广告需要1-3秒（加载该广告需要花费时间）。

我的想法是，如果我在互动事件后几秒钟加载该Google广告，也许我可以节省1-3秒钟的互动时间（由于Google广告，这会花费我很多时间）。

我希望灯塔的性能有所提高，因为我互动的时间可能会更少。这只是我的假设。如果我错了请纠正我

Answer 1

您可以使用DOMContentLoaded。 As MDN documentation says：

当初始HTML文档包含以下内容时，将触发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();
}

是否有任何JavaScript事件可以告诉我们主线程何时处于空闲状态？

1 个答案: