当前位置：首页 > 行业动态 > 正文

html中链接js

在HTML中链接JS，通过` 标签引入，通常置于`前，确保路径正确

HTML中链接JavaScript的三种方式

内联脚本（直接在HTML中写JS代码）

特点：

  • 脚本直接写在<script>标签内部
  • 简单快速，适合少量代码
  • 不利于代码复用和维护

示例： 

<!DOCTYPE html>
<html>
<body>
  <h1>内联脚本示例</h1>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      alert('页面加载完成！');
    });
  </script>
</body>
</html>

内部脚本（在<head>或<body>中定义JS代码）

特点：

html中链接js 第1张

  • 将JS代码集中在<script>标签内
  • 比内联脚本更整洁，但仍局限于单个页面
  • 可搭配defer或async属性控制加载顺序

示例： 

<!DOCTYPE html>
<html>
<head>内部脚本示例</title>
  <script defer>
    console.log('头部脚本延迟执行');
  </script>
</head>
<body>
  <h1>内部脚本示例</h1>
  <script>
    console.log(' body脚本同步执行');
  </script>
</body>
</html>

外部脚本（链接外部JS文件）

特点：

  • 将JS代码写入独立文件（如main.js）
  • 通过<script src="路径">引入
  • 支持代码复用和模块化开发

示例： 

<!DOCTYPE html>
<html>
<head>外部脚本示例</title>
  <script src="js/main.js" defer></script>
</head>
<body>
  <h1>外部脚本示例</h1>
</body>
</html>

外部文件（main.js）： 

document.addEventListener('DOMContentLoaded', function() {
  console.log('外部脚本执行');
});

外部脚本链接的注意事项

注意点 说明
路径问题 区分相对路径（如js/main.js）和绝对路径（如/assets/js/main.js）
defer属性 延迟执行脚本，直到HTML解析完成（常用于操作DOM的脚本）
async属性 异步加载脚本，不保证执行顺序（适合无依赖的第三方脚本）
浏览器缓存 外部文件可被缓存，减少重复加载

三种方式对比表

方式 写法 执行时机 维护性
内联脚本 <script>...</script> 立即执行（可能阻塞渲染） 差（不可复用）
内部脚本 <script>...</script> 根据defer/async决定 一般（仅限当前页）
外部脚本 <script src="..."></script> 根据defer/async决定 好（可复用）

相关问题与解答

问题1：为什么推荐使用外部脚本？

解答：

  1. 复用性：多个页面可共享同一个JS文件，减少代码冗余。
  2. 维护性：修改JS逻辑时只需更新一个文件，无需逐个修改HTML页面。
  3. 性能优化：浏览器可缓存外部JS文件，加快页面加载速度。
  4. 模块化：支持拆分功能到不同文件,便于团队协作。

问题2：defer和async的区别是什么？

解答：
| 属性 | 执行顺序 | 是否阻塞HTML解析 | 适用场景 |
|———-|—————————-|———————-|————————–|
| defer | HTML解析完成后按顺序执行 | 否 | 操作DOM或依赖其他脚本时 |
| async | 下载完成立即执行（乱序） | 否 | 加载第三方库（如广告JS） |

示例： 

<!-defer示例：按顺序执行 -->
<script src="a.js" defer></script>
<script src="b.js" defer></script>
<!-async示例：可能乱序执行 -->
<script src="x.js" async></script>
<script src="y.js" async
HTML
0

相关文章