最常用且推荐的方式是监听 DOMContentLoaded 事件，它在 HTML 文档完全加载并解析完毕时触发，不等待样式表、图片等资源，比 window.onload 更早高效；备用方案为 load 事件，适用于依赖所有外部资源加载完成的场景；内联脚本置于 </body> 底部是最轻量方案；现代开发中则依托模块系统或框架生命周期（如 Vue mounted、React useEffect）自动处理。
页面加载完成后执行初始化逻辑，最常用且推荐的方式是监听 DOMContentLoaded 事件，它在 HTML 文档完全加载并解析完毕（不等待样式表、图片等资源）时触发，比 window.onload 更早、更高效。
使用 document.addEventListener('DOMContentLoaded', ...)
这是现代标准做法，兼容所有主流浏览器（IE9+），适合绝大多数初始化场景，比如绑定事件、操作 DOM、初始化组件：
- 确保 DOM 树已就绪，可安全查询和修改元素
- 不会阻塞 CSS 或图片加载，响应更快
- 可多次调用，多个监听器会按注册顺序执行
示例：
<script>document.addEventListener('DOMContentLoaded', function() {
console.log('DOM 已加载完成');
const btn = document.getElementById('myBtn');
if (btn) btn.addEventListener('click', handleButtonClick);
});
</script>
备用方案：window.addEventListener('load', ...)
当初始化逻辑依赖**所有外部资源**（如图片、样式表、字体、iframe）加载完毕时才执行，应使用 load 事件：
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 触发时机晚于
DOMContentLoaded - 适用于需读取图片尺寸、计算渲染后布局等场景
- 注意：若页面含大量未加载完成的资源，可能显著延迟执行
示例：
<script>window.addEventListener('load', function() {
console.log('页面及全部资源已加载完成');
const img = document.querySelector('img');
console.log('图片高度:', img.naturalHeight);
});
</script>
简洁写法：内联脚本放在 </body> 底部
如果初始化逻辑只操作已写入的 DOM，且无需复杂依赖管理，把 <script> 放在 </body> 前是最轻量的方案：
- 浏览器自上而下解析，执行脚本时 DOM 必然已存在
- 无需事件监听，无兼容性顾虑，执行时机确定
- 缺点：不利于代码复用和模块化，不适合大型项目
示例：
<body><div id="app"></div>
<script>
initApp(); // 此时 #app 元素一定存在
</script>
</body>
现代开发中：配合模块系统与框架生命周期
在使用 ES 模块、Vue、React 等场景下，通常不手动监听加载事件：
- ES 模块脚本默认具有
defer行为（等同于DOMContentLoaded） - Vue 的
mounted()、React 的useEffect(() => {}, [])都在 DOM 渲染后执行 - 仍需注意：框架挂载点是否已存在于初始 HTML 中
例如使用模块脚本：
<script type="module">import { init } from './main.js';
init(); // 自动在 DOM 加载后执行
</script>
