在 JavaScript 中，当我想在页面加载后运行一次脚本时，我应该使用 window.onload 还是只编写脚本？
例如，如果我想有一个弹出窗口，我应该写（直接在<script>标签内）：
alert("hello!");
或者：
window.onload = function() {
alert("hello!");
}
两者似乎都在页面加载后立即运行。有什么区别？
【问题讨论】：
标签： javascript onload onload-event
其他答案似乎都过时了
首先，将脚本放在顶部并使用window.onload 是一种反模式。它充其量是 IE 时代遗留下来的，或者最糟糕的是对 JavaScript 和浏览器的误解。
您可以将脚本移动到 html 的底部
<html>
<head>
<title>My Page</title>
</head>
<body>
content
</body>
<script src="some-external.js"></script>
<script>
some in page code
</script>
</html>
人们使用window.onload 的唯一原因是他们错误地认为脚本需要放在head 部分。因为如果你的脚本在 head 部分，那么事情是按顺序执行的，那么根据 按顺序执行的定义，正文和你的内容还不存在。
解决方法是使用 window.onload 等待页面的其余部分加载。将脚本移至底部也解决了该问题，现在无需使用window.onload，因为您的正文和内容已经加载完毕。
更现代的解决方案是在您的脚本上使用defer 标签，但要使用该标签，您的脚本需要全部是外部的。
<head>
<script src="some-external.js" defer></script>
<script src="some-other-external.js" defer></script>
</head>
这样做的好处是浏览器将立即开始下载脚本并按照指定的顺序执行它们，但它会等到页面加载后才执行它们，不需要window.onload或更好但仍然不需要window.addEventListener('load', ...
【讨论】：
defer 的提示。我见过它，但从未意识到它的含义。
window.onload 时的第一个结果，所以它似乎需要一个更新的答案
window.onload 只是在浏览器访问它时运行。
window.addEventListener 在运行之前等待窗口加载。
通常你应该做第二个，但你应该给它附加一个事件监听器而不是定义函数。例如：
window.addEventListener('load',
function() {
alert('hello!');
}, false);
【讨论】：
据此：
加载事件在文档加载过程结束时触发。至此，文档中的所有对象都在DOM中，所有图片和子帧都加载完毕了。
只要浏览器在 HTML 中点击该位置，您的第一个 sn-p 代码就会运行。
第二个 sn-p 将在 DOM 和所有图像完全加载时触发弹出窗口（请参阅规范）。
考虑到alert() 函数，它在什么时候运行并不重要（它不依赖于window 对象之外的任何东西）。但是如果你想操纵DOM - 你绝对应该等待它正确加载。
【讨论】：
这取决于您是否希望它在遇到脚本元素时运行，或者您是否希望它在加载事件触发时运行（即在整个文档（包括图像等内容）加载之后）。
两者都不对。
不过，一般来说，我会避免将函数直接分配给onload，而是使用addEventListener（如果我需要支持旧版浏览器，请使用兼容性库）。
【讨论】：
等待 DOM 加载的原因是您可以定位在脚本之后加载的任何元素。如果您只是创建一个alert，那没关系。但是，假设您的目标是 div，它位于您的脚本之后的标记中，如果您不等到 DOM 树的那部分加载，您会收到错误。
如果您使用 jQuery，document.ready 是 window.onload 的绝佳替代品。
【讨论】：
你有三个选择：
直接在脚本标签内一解析就运行。
一旦 DOM 准备就绪，document.addEventListener( "DOMContentLoaded", function(){}); 内部就会运行它。
一旦加载所有页面资源，window.onload function(){}) 内部就会运行。
【讨论】：