打开页面就执行JS的解决方案包括：使用DOMContentLoaded事件、放置JS代码在页面底部、使用defer或async属性、模块化加载JS、使用事件监听器。 其中，使用DOMContentLoaded事件 是一种有效的方法，可以确保JavaScript代码在HTML文档完全加载和解析之后再执行，避免因HTML元素未加载而出现的错误。
使用DOMContentLoaded事件的详细描述：当你使用DOMContentLoaded事件时，你可以确保JavaScript代码只有在文档的内容完全加载和解析之后才执行，而不必等到所有资源（如图片、样式表等）加载完毕。这可以显著提高页面的加载速度和用户体验，同时避免因为DOM元素未加载而导致的JavaScript错误。
document.addEventListener('DOMContentLoaded', function() {
// 你的JavaScript代码
});
使用这个事件处理程序，你可以确保所有的DOM元素在脚本执行之前都已经加载完毕，从而避免潜在的错误。接下来，我们将详细探讨其他解决方案，并解释它们的优缺点。
一、使用DOMContentLoaded事件
确保DOM元素加载完毕
DOMContentLoaded事件是一个非常有效的方法来确保JavaScript代码在HTML文档完全加载和解析之后再执行。这对于避免因HTML元素未加载而出现的错误特别重要。通过监听DOMContentLoaded事件，你可以确保所有的DOM元素在脚本执行之前都已经加载完毕。
document.addEventListener('DOMContentLoaded', function() {
// 你的JavaScript代码
});
优化页面加载速度
使用DOMContentLoaded事件不仅可以确保DOM元素加载完毕，还可以显著提高页面的加载速度和用户体验。因为它不必等到所有资源（如图片、样式表等）加载完毕就能执行JavaScript代码，这样可以更快地响应用户操作。
二、放置JS代码在页面底部
避免阻塞页面渲染
将JavaScript代码放置在页面底部（通常是在