如何加载js

加载 javascript 有以下几种方式：html内联脚本：优点简单，但阻碍页面渲染。外部脚本：提高可重用性，便于维护，但需要额外http请求。延迟加载：防止渲染阻塞，但可能导致内容闪烁。异步加载：不阻塞页面渲染，但脚本执行顺序不可预测。推荐使用外部脚本加载，在需要避免渲染阻塞时可以使用延迟加载或异步加载。

如何加载 JavaScript

加载 JavaScript 有多种方法，每种方法都有自己的优点和缺点。选择最适合您项目的方法很重要。

HTML 内联脚本

最简单的方法是直接在 HTML 中包含脚本：

<script>
  // 您的 JavaScript 代码
</script>

优点：

• 简单明了
• 适用于小型脚本

缺点：

• 阻碍页面渲染
• 难以维护和重用

外部脚本

加载外部脚本是将脚本保存在单独文件中的方法：

<script src="my-script.js"></script>

优点：

• 加快页面加载，因为脚本异步加载
• 提高代码可重用性
• 便于维护

缺点：

• 需要额外的 HTTP 请求
• 如果脚本加载失败，可能会破坏页面

延迟加载

延迟加载脚本可以防止它们阻碍页面渲染：

<script defer src="my-script.js"></script>

优点：

• 避免渲染阻塞
• 提高页面加载性能

缺点：

• 脚本加载后可能导致页面内容闪烁
• 可能需要调整脚本执行以匹配其延迟加载

异步加载

异步加载类似于延迟加载，但脚本在加载后立即执行：

<script async src="my-script.js"></script>

优点：

• 不阻塞页面渲染
• 可能提高某些情况下的页面交互性

缺点：

• 脚本执行顺序不可预测
• 可能需要调整脚本执行以避免冲突

推荐方法

对于大多数情况，外部脚本加载是最推荐的方式。它提供了代码的可重用性、维护性和性能优势。当需要避免渲染阻塞时，可以使用延迟加载或异步加载。