外部引入的 JavaScript 放置位置
部引入的 JavaScript 通常有两种常见的放置位置，每个位置都有其优缺点，具体取决于页面的需求和性能优化目标：
1. 放在页面的 <head> 标签中
- 这种方式在 HTML 文档的
<head>部分引入 JavaScript 文件。
<head>
<script src="example.js"></script>
</head>
<body>
<div id="myDiv">Hello World</div>
</body>
优点：
- 在页面加载前执行 JavaScript，确保页面初始化时所有的脚本都已经加载完毕。
- 适合一些需要在页面渲染之前就初始化的 JavaScript，比如追踪代码或检测设备信息。
缺点：
- JavaScript 会阻塞 HTML 的解析，导致页面内容显示延迟，影响用户体验，尤其是当 JavaScript 文件较大或网络速度较慢时。
- 不推荐用于非关键脚本。
2. 放在页面的 <body> 底部（推荐做法）
- 这种方式将 JavaScript 文件放在页面的最后，即
<body>标签的末尾。
<body>
<div id="myDiv">Hello World</div>
<script src="example.js"></script>
</body>
优点：
- HTML 先解析并显示页面内容，用户可以快速看到页面内容，提升用户体验。
- JavaScript 不会阻塞 HTML 解析，尤其对于较大文件或复杂脚本，页面的初始加载速度会更快。
- 对于需要操作 DOM 的 JavaScript，这种方式可以保证页面元素已解析完毕，避免找不到 DOM 元素的问题。
缺点：
- 脚本执行较晚，可能会推迟某些交互行为的初始化。
- 如果页面的交互依赖 JavaScript，用户可能会在 JavaScript 执行前无法使用页面上的功能。
3. 使用 defer 或 async 属性（优化方案）
如果希望在 <head> 中引入 JavaScript 文件，但不想阻塞 HTML 的解析，可以使用以下两种属性：
defer 属性：
- JavaScript 文件会与 HTML 并行加载，但会在 HTML 完全解析完毕后才执行。
- 推荐使用
defer，因为它不会阻塞 HTML 解析，并且会按照脚本的引入顺序依次执行。
<head>
<script src="example.js" defer></script>
</head>
优点：
- 不阻塞 HTML 解析，提升页面加载性能。
- JavaScript 执行时，所有 DOM 元素已经被解析完毕，避免找不到 DOM 的问题。
- 执行顺序保持一致（按顺序执行）。
async 属性：
- JavaScript 文件也会与 HTML 并行加载，但一旦文件加载完毕，就立即执行，而不等待 HTML 完全解析。
- 适合独立、不依赖其他脚本或 DOM 操作的 JavaScript 文件，如分析工具或广告脚本。
<head>
<script src="example.js" async></script>
</head>
优点：
- 不阻塞 HTML 解析，提升页面性能。
- 适合不依赖 DOM 的脚本。
缺点：
- 执行顺序不确定，因为脚本会根据其加载完成的时间执行，可能打乱多文件的执行顺序。
总结：
- 最佳实践是将 外部 JavaScript 文件放在
<body>底部，以确保页面内容快速加载，避免阻塞 HTML 解析。 - 如果希望放在
<head>中，可以使用defer属性 来确保 JavaScript 不阻塞页面加载，同时保证脚本在 DOM 完全解析后才执行。 - 使用
async属性 适合不依赖 DOM 或其他脚本的独立脚本，能够进一步优化页面加载性能。