确保你的JavaScript代码只在网页完全加载后运行对于防止错误和确保平滑的功能至关重要。过早执行可能导致诸如尝试操作尚未渲染的元素等问题，从而导致意外行为或崩溃。本文详细介绍了几种有效的方法来保证你的脚本在正确的时间执行。
目录
将脚本放在body的末尾
最简单的方法是将你的<script>标签放在HTML<body>元素的末尾。这确保浏览器在执行脚本之前解析并渲染整个页面。
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
</head>
<body>
<h1>你好，世界！</h1>
<p>这是一个段落。</p>
<script>
console.log("脚本在页面加载后执行。");
// 这里进行DOM操作
</script>
</body>
</html>
这对于小型脚本来说已经足够了。对于大型项目，更高级的方法更可取。
在window对象上使用onload事件
当整个页面（包括所有资源）加载完毕时，onload事件就会触发。将事件监听器附加到window对象：
<script>
window.onload = function() {
console.log("页面完全加载");
// 你的代码在这里
};
</script>
这保证你的代码只有在一切准备就绪后才会运行。
在body元素上使用onload事件
或者，将事件监听器直接附加到<body>元素。在某些情况下，这可能会稍微快一些：
<body onload="myFunction()">
<script>
function myFunction() {
console.log("页面主体已加载");
// 你的代码在这里
}
</script>
</body>
在外部JavaScript文件中使用onload
对于大型项目，请使用外部JavaScript文件。onload事件的工作方式相同：
myScript.js：
window.onload = function() {
console.log("脚本在页面加载后执行。");
// 你的代码在这里
};
index.html：
<script src="myScript.js"></script>
将<script>标签放在<head>或<body>中；onload事件处理计时。
现代方法：DOMContentLoaded
为了提高性能，请考虑使用DOMContentLoaded事件。当HTML文档完全加载并解析后，此事件就会触发，而无需等待样式表、图像和子框架完成加载。这通常比onload更快。
document.addEventListener('DOMContentLoaded', function() {
console.log('DOM完全加载');
// 你的代码在这里
});
选择最适合你项目规模和复杂性的方法。对于简单的项目，将<script>标签放在<body>的末尾就足够了。对于大型项目或异步操作，onload或DOMContentLoaded提供了更强大、更可靠的解决方案。始终优先考虑简洁、组织良好的代码。