在网页中，<script> 标签有几种预加载方式可以用来优化脚本的加载和执行。不同的预加载方式具有不同的特性和应用场景，以下是主要的预加载方式及其区别：
1. <script> 标签的默认行为
<script src="script.js"></script>
- 行为：默认情况下，
<script> 标签会在 HTML 文档解析时同步加载和执行脚本。这会阻塞文档的渲染，直到脚本下载并执行完毕。
2. defer 属性
<script src="script.js" defer></script>
- 行为：
defer 属性表示脚本将在文档解析完成后（即 DOMContentLoaded 事件之前）异步执行。这种方式不会阻塞 HTML 文档的解析，脚本会按顺序执行。
- 特点：
- 适用于
<head> 部分的脚本。
- 保证脚本执行顺序与在文档中的顺序一致。
- 有效避免了脚本加载对页面渲染的阻塞。
3. async 属性
<script src="script.js" async></script>
- 行为：
async 属性表示脚本将异步加载并立即执行（不管 HTML 是否解析完毕）。一旦脚本下载完成，它将立即执行，而不会等待其他脚本或 HTML 解析完成。
- 特点：
- 适用于不依赖于其他脚本的脚本（如分析脚本、广告脚本等）。
- 脚本的执行顺序与在文档中的顺序不一定一致，取决于哪个脚本最早加载完成。
- 有可能会影响页面的渲染顺序和依赖脚本的执行顺序。
4. preload 和 prefetch
<link rel="preload" href="script.js" as="script">
<link rel="prefetch" href="script.js" as="script">
- 行为：
preload：在页面加载过程中提前加载资源，以便资源在需要时能更快地使用。通常用于确保关键资源在页面渲染前已加载完成。prefetch：指示浏览器预先加载可能在将来页面中使用的资源，以提高未来页面的加载速度。通常用于优化用户可能接下来的操作。
- 特点：
preload 用于当前页面中即将需要的资源，加载优先级较高。prefetch 用于未来可能需要的资源，加载优先级较低。preload 和 prefetch 可以提高资源的加载速度，但它们的使用场景和效果有所不同。
5. module 类型脚本
<script type="module" src="script.js"></script>
- 行为：
type="module" 指定脚本为 ECMAScript 模块，支持模块化导入和导出。模块脚本会被延迟加载并在 HTML 文档解析完成后执行。
- 特点：
- 支持
import 和 export 语法，允许模块化开发。
- 默认具有
defer 行为，保证模块脚本在 DOMContentLoaded 事件触发之前执行。
