加载 JS 脚本有以下几种方法：内联脚本：直接写在 HTML 文档中，加载速度快，但难以维护；外部脚本：存储在独立的 .js 文件中，维护性好，可被缓存；异步加载：允许浏览器继续解析 HTML，提高加载速度和交互性，但执行顺序无保证；延迟加载：只在需要时才加载脚本，进一步提升加载速度和交互性，但可能导致延迟运行。
如何加载 JS 脚本
加载 JavaScript (JS) 脚本是向网页添加动态行为和功能的关键步骤。有几种不同的方法可以加载 JS 脚本，每种方法都有不同的优点和缺点。
内联脚本
内联脚本直接写在 HTML 文档中，如下所示：
<code class="html"><script> // 你的 JavaScript 代码 </script></code>
优点：
- 加载速度快，因为脚本与 HTML 一起下载。
- 不需要HTTP 请求。
缺点：
- 使 HTML 文档难以维护。
- 脚本难以缓存。
外部脚本
外部脚本存储在单独的 .js 文件中，并使用 <script src> 元素加载：
<code class="html"><script src="path/to/script.js"></script></code>
优点：
- 使 HTML 文档更易于维护。
- 脚本可以被缓存，提高加载速度。
- 脚本可以重复使用多个页面。
缺点：
- 加载速度比内联脚本慢，因为浏览器必须发送一个单独的 HTTP 请求来获取脚本。
异步加载脚本允许浏览器在加载和执行脚本时继续解析 HTML 文档。这可以通过使用 <script async> 元素实现：
<code class="html"><script async src="path/to/script.js"></script></code>
优点：
- 提高页面加载速度，因为浏览器不必等待脚本加载完成再渲染页面。
- 提高交互性，因为用户可以在脚本加载时与页面交互。
缺点：
- 脚本可能无序执行，因为浏览器不会保证脚本执行顺序。
- 可能会导致问题，例如变量冲突。
延迟加载脚本直到用户需要它们时才加载。这可以通过使用 <script defer> 元素实现：
<code class="html"><script defer src="path/to/script.js"></script></code>
优点：
- 提高页面加载速度，因为浏览器不必立即加载非必需脚本。
- 提高交互性，因为关键脚本在用户交互之前加载。
缺点：
- 可能会导致延迟加载的脚本运行缓慢，因为它们必须等到页面加载后再加载。
- 可能需要使用特定技术（例如事件侦听器）来确保脚本在加载后被执行。
