理论上，我们的代码不是可以为 DOM Ready 添加事件监听器，但是当我们添加它时，已经太晚了？
例如，如果我们链接到 .js文件接近 <body> ... </body> 末尾，以及该文件的下载时间.js文件是 2 或 3 秒后，DOM 早已准备好，事件已经触发并通知所有监听器，现在 JS 代码已完成
window.addEventListener('DOMContentLoaded', (event) => {
console.log('DOM Ready event fired');
});
现在真的太晚了，处理程序永远不会被调用吗？实际上，这种情况不会也不应该发生，因为那样就会出现奇怪的行为。那么这是如何处理的呢？浏览器是否“追溯”通知监听器(即使监听器添加得太晚，浏览器也会通知它？)。
话虽如此，如果我们在 DOM 就绪处理程序中注册 DOM 就绪监听器，那么“即使添加得太晚浏览器也会通知监听器”是不正确的:
window.addEventListener('DOMContentLoaded', (event) => {
console.log('DOMContentLoaded event fired 01');
window.addEventListener('DOMContentLoaded', (event) => {
console.log('DOM Ready event fired 02');
});
});另一种方法是当我们加载页面时，然后在调试控制台中输入
window.addEventListener('DOMContentLoaded', (event) => {
console.log('DOM Ready event fired');
});
甚至如果我们错过了当前的事件周期，那么它就不会被调用:
setTimeout(function() {
window.addEventListener('DOMContentLoaded', (event) => {
console.log('DOM Ready event fired');
});
}, 0);那么如果监听器添加得太晚，有什么规则呢？
最佳答案
不，这不是问题。
在加载所有 HTML(包括加载所有脚本)之前，不会触发 DOMReady 事件。带有 async 属性的脚本是个异常(exception)；这些在后台加载，DOMReady 不会等待它们。具有 defer 属性的脚本也会在后台加载，但浏览器会在发送 DOMReady 事件之前等待它们加载。
如果您使用 jQuery，即使在加载 DOM 之后，您也可以使用其 .ready() 函数。如果您稍后调用 $(document).ready()，它只是立即调用该函数，而不是添加事件监听器。
参见Scripts: async, defer了解同步与异步加载脚本的说明。
关于javascript - 是不是当我们为 DOM Ready 添加事件处理程序时，就已经太晚了？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59780689/