在编写 Chrome 扩展程序的内容脚本时，我们通常需要访问当前页面的 DOM 元素。但是，在脚本处理 DOM 元素之前，必须确保文档已经完全加载并准备好使用。这是因为如果您试图修改或操作尚未完全加载的 DOM 元素，将会出现意想不到的错误。
在这种情况下，您可能会疑惑是否应该等待 document.ready 事件才能开始处理文档。答案是：不一定。
等待 document.ready 的优缺点
等待 document.ready 事件可以确保 JavaScript 代码只在文档完全加载后运行。这可以避免访问尚未创建或初始化的元素。但是，这种做法会延迟脚本的执行，从而增加页面加载时间。
另外，由于 document.ready 是 jQuery 特有的事件，如果您不使用 jQuery，则无法使用此事件。虽然可以手动实现类似的功能，但这需要更多的代码和时间来完成。
不等待 document.ready 的解决方案
更好的解决方案是使用 DOMContentLoaded 事件。与 document.ready 不同，DOMContentLoaded 是原生的 JavaScript 事件，当初始 HTML 文档完全加载和解析时触发。这意味着您可以在文档加载完成后立即开始处理 DOM 元素，而无需等待其他延迟。
以下是使用 DOMContentLoaded 的示例代码：
document.addEventListener("DOMContentLoaded", function() {
// 在这里处理 DOM 元素
});总结
在 Chrome 扩展程序的内容脚本中，确保文档加载完全后再处理 DOM 元素至关重要。而不必等待 document.ready 事件，可以使用原生的 JavaScript DOMContentLoaded 事件来实现相同的目的。这样可以避免页面加载时间延迟，并且不需要依赖 jQuery 或其他库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31111