使用defer属性可延迟脚本执行，适用于依赖DOM或有依赖关系的外部脚本，按引入顺序在文档解析后执行；async属性实现异步加载，适合无依赖的独立脚本，但不保证执行顺序；将script置于body底部可确保DOM加载完成，兼容性好但可能影响首屏性能；监听DOMContentLoaded事件可在HTML解析完成后安全操作DOM，而load事件则需等待所有资源加载完毕。根据脚本特性选择合适方式，能有效避免执行时机问题。
网页中HTML脚本的执行顺序直接影响页面加载效果和功能实现。控制好脚本执行时机，能避免变量未定义、DOM未加载等问题。关键在于理解浏览器解析机制，并合理使用相关属性和事件。
1. 使用 defer 属性延迟脚本执行
在 script 标签中添加 defer 属性，可以让外部脚本在文档解析完成后、DOMContentLoaded 事件触发前执行。
适用场景：- 脚本依赖DOM结构，比如需要操作元素
- 多个脚本之间有依赖关系，需按引入顺序执行
- 提升页面渲染速度，不阻塞HTML解析
示例代码：
<script src="a.js" defer></script> <script src="b.js" defer></script>
这两个脚本会按顺序在文档解析完后执行，不会影响页面渲染。
立即学习“前端免费学习笔记（深入）”；
2. 使用 async 属性异步加载脚本
async 适用于独立脚本，比如统计代码或广告脚本，加载时不阻塞解析，下载完成后立即执行。
注意点：- 执行时机不可控，可能在DOM完全生成前运行
- 多个 async 脚本之间不保证执行顺序
- 适合无依赖、自包含的功能脚本
如果脚本不需要操作主文档内容，async 是性能更优的选择。
3. 将脚本放在 body 底部
传统但有效的方法是把 script 标签放在 </body> 之前。此时HTML已基本解析完成，可以直接访问DOM元素。
优点：
- 无需额外属性，兼容性好
- 执行顺序明确，按书写顺序执行
- 避免“找不到元素”类错误
缺点是可能延后脚本执行时间，影响首屏体验。
4. 监听 DOMContentLoaded 或 load 事件
通过监听事件确保代码在合适时机运行。
说明：- DOMContentLoaded：HTML解析完成，资源如图片可能还未加载
- window.onload：所有资源（图片、样式等）加载完毕
示例：
document.addEventListener('DOMContentLoaded', function() {
// 安全操作DOM
});
这种方式灵活，适合动态加载或条件执行的脚本逻辑。
基本上就这些。根据脚本用途选择 defer、async、位置调整或事件监听，就能有效管理执行顺序，避免常见问题。不复杂但容易忽略细节。
