使用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 标签放在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
