在构建网页时，我们经常需要在页面加载完成之前执行一些JavaScript代码。这有助于确保我们的脚本能够正确地与DOM元素交互，避免在不存在的元素上执行操作。以下是三种常用的方法来实现页面加载前的代码执行：DOMContentLoaded事件、window.onload事件和document.readyState属性。
使用DOMContentLoaded事件
DOMContentLoaded事件在HTML文档被完全加载和解析完成后触发，不需要等待样式表、图片和子框架的加载完成。这使得它成为在页面加载早期调用JavaScript代码的理想选择。
document.addEventListener('DOMContentLoaded', function() {
// 这里可以放置需要在页面加载完成后立即执行的代码
console.log('DOM完全加载并解析完成');
});
使用DOMContentLoaded的优点是它不会阻塞页面的渲染，因此可以提高页面的加载速度。
使用window.onload事件
window.onload事件在页面完全加载完成后触发，包括所有的依赖资源（如图片、样式表等）。这意味着在window.onload事件处理函数中执行的代码将等待所有内容加载完毕。
window.onload = function() {
// 这里可以放置需要在页面完全加载完成后执行的代码
console.log('页面完全加载完成');
};
window.onload的缺点是它会阻塞页面的渲染，直到所有资源都加载完毕。因此，对于大型页面或资源密集型应用，这可能会导致明显的延迟。
使用document.readyState属性
document.readyState属性可以用来检查文档的加载状态。它有以下几个可能的值：
"loading"：文档正在加载。"interactive"：文档已经加载完毕，文档已被解析，但是样式表、图片和子框架仍在加载。"complete"：文档和所有依赖的资源都已经加载完成。
我们可以监听document.readyState属性的变化，并在状态变为"interactive"或"complete"时执行代码。
function handleReadyStateChange() {
if (document.readyState === 'interactive' || document.readyState === 'complete') {
// 这里可以放置需要在页面加载完成后执行的代码
console.log('文档加载状态已变为交互或完成');
document.removeEventListener('readystatechange', handleReadyStateChange);
}
}
document.addEventListener('readystatechange', handleReadyStateChange);
使用document.readyState的优点是它允许我们在页面加载的早期阶段执行代码，而不必等待所有资源加载完成。
总结
选择哪种方法取决于你的具体需求。如果你只需要在DOM完全加载后执行代码，DOMContentLoaded是最佳选择。如果你需要等待所有资源加载完成，那么window.onload可能更适合。而document.readyState则提供了一个更加灵活的解决方案，允许你在页面加载的不同阶段执行代码。无论哪种方法，正确地使用它们可以确保你的JavaScript代码在正确的时机执行，从而提高页面的性能和用户体验。