【html引用js的三种方法】在网页开发中，JavaScript（简称JS）是实现网页动态效果和交互功能的重要工具。而将JS代码嵌入到HTML页面中，是开发者日常工作中必不可少的一环。本文将总结HTML中引用JS的三种常见方法，并以表格形式清晰展示。
一、直接内联脚本
这是最简单的一种方式，直接在HTML文件中使用`<script>`标签将JS代码写在HTML文档内部。这种方式适用于小型项目或简单的脚本。
优点：
- 简单易用
- 不需要额外的文件
缺点：
- 代码不易复用
- 难以维护
示例代码：
```html
<script>
alert("Hello, World!");
</script>
```
二、外部JS文件引入
将JS代码保存为单独的`.js`文件，然后通过`<script>`标签的`src`属性引入。这种方法适用于大型项目，有助于代码的组织与复用。
优点：
- 代码可复用
- 易于维护
- 提高页面加载性能
缺点：
- 需要额外的文件管理
示例代码：
```html
<script src="script.js"></script>
```
三、动态加载JS（异步加载）
使用JavaScript动态创建`<script>`标签，实现按需加载JS文件。这种方法常用于优化页面性能，特别是在加载大量资源时。
优点：
- 按需加载，提升性能
- 可控制加载顺序
缺点：
- 实现相对复杂
- 需注意加载顺序和依赖关系
示例代码：
```html
<script>
var script = document.createElement('script');
script.src = 'dynamic.js';
document.head.appendChild(script);
</script>
```
总结对比表
| 引用方式 | 是否内联 | 文件类型 | 优点 | 缺点 |
| 直接内联脚本 | 是 | HTML内嵌 | 简单易用 | 代码难以复用 |
| 外部JS文件引入 | 否 | .js文件 | 可复用、易于维护 | 需要额外管理文件 |
| 动态加载JS | 否 | .js文件 | 按需加载、提升性能 | 实现复杂、需处理依赖关系 |
通过以上三种方法，开发者可以根据项目需求灵活选择合适的JS引用方式。合理使用这些方法，不仅能提高开发效率，还能增强网页的性能和可维护性。
