【html如何引入js文件】在网页开发中，HTML 和 JavaScript 是紧密配合的两个重要部分。HTML 负责页面结构，而 JavaScript 则负责实现页面的动态功能。为了让 HTML 页面能够使用 JavaScript 的功能，就需要将 JS 文件引入到 HTML 中。以下是几种常见的引入方式及其特点总结。
一、直接引入 JS 文件的方式总结
| 引入方式 | 说明 | 示例代码 | 是否支持异步加载 | 是否推荐 |
| `<script src="script.js"></script>` | 最常见的方式，通过 `src` 属性引入外部 JS 文件 | `<script src="script.js"></script>` | 否 | 推荐 |
| `<script type="text/javascript">...</script>` | 内联脚本，直接写在 HTML 文件中 | `<script type="text/javascript">alert('Hello');</script>` | 否 | 不推荐（大型项目） |
| `defer` 属性 | 延迟执行，确保 HTML 加载完成后执行 | `<script src="script.js" defer></script>` | 是 | 推荐 |
| `async` 属性 | 异步加载，不阻塞 HTML 解析 | `<script src="script.js" async></script>` | 是 | 推荐 |
| 动态创建 script 标签 | 通过 JavaScript 动态添加脚本标签 | `var script = document.createElement('script'); script.src = 'script.js'; document.head.appendChild(script);` | 是 | 推荐（适用于按需加载） |
二、不同引入方式的适用场景
1. 直接引入（`<script src="...">`）
- 适用于大多数情况，尤其是需要全局访问的 JS 文件。
- 优点是简单、易于维护。
- 缺点是会阻塞 HTML 的渲染，影响性能。
2. 内联脚本
- 适合少量代码或小型项目。
- 不便于后期维护和复用。
3. `defer` 属性
- 用于需要在 HTML 完全加载后才执行的脚本。
- 保证脚本在 DOM 加载完成后执行，但不会阻塞 HTML 渲染。
4. `async` 属性
- 适用于独立的脚本，如统计代码或广告脚本。
- 脚本加载时不会阻塞 HTML 解析，但执行顺序不确定。
5. 动态创建 script 标签
- 适用于按需加载脚本，提升性能。
- 常用于模块化开发或懒加载策略。
三、注意事项
- 在 HTML 的 `
` 或 `` 中合理放置 `<script>` 标签，避免影响页面加载速度。- 对于大型项目，建议使用模块化方式（如 ES6 模块）或构建工具（如 Webpack）来管理 JS 文件。
- 使用 `defer` 和 `async` 可以优化页面性能，提升用户体验。
四、总结
在 HTML 中引入 JS 文件是网页开发的基础操作之一。根据项目需求选择合适的引入方式，可以有效提升页面性能和可维护性。对于大多数项目，推荐使用 `<script src="...">` 配合 `defer` 或 `async` 属性的方式进行引入，既简洁又高效。
