AddEventListener支配和访问dom树

Question

只是想知道，看看w3c processing model事件“主宰”存在。它可以通过性能api访问。无论如何可以绑定事件吗？

在我看来，自DOM完全加载以来，应该可以在早期阶段访问和操作dom吗？

我正在开发一个应用程序，这可以帮助我提高性能安静。我不需要在domContentLoaded上提供的完全css渲染屏幕，但我喜欢快速检查dom结构中元素的存在，如果是这样，则加载其他资源异步。

据我测试，通过addEventListener或？

无法向dominteractive添加事件监听器

document.addEventListener("dominteractive")

是否有任何解决方法或者这只是缺乏浏览器支持？

Answer 1

您必须监听事件 readystatechange

// Log the initial readyState
console.log(document.readyState)  // loading

document.addEventListener('readystatechange', () => {
  // The first readyStateChange will be : interactive
  // The second readyStateChange will be : complete
  console.log(document.readyState)
});

因此此 javascript 代码必须内联在您的 html 文件中才能在文档交互之前执行。

否则你可以添加这样的保护措施：

if (document.readyState == "loading") {
  console.log(document.readyState);
  document.addEventListener('readystatechange', () => {
    console.log(document.readyState);
  });
} else {
  // document already interactive
  console.log(document.readyState);
}

这个保护措施应该没用，因为你想听 dom 交互。