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

html中引用js

在HTML中引用JavaScript可通过` 标签实现，支持三种方式：1. 内联脚本（直接编写代码）；2. 外部链接（src 属性指向.js文件）；3. 模块化导入（type=”module” ），建议将脚本置于 前或使用defer/async`控制执行时机，避免

HTML中引用JavaScript的三种方式

内联脚本（直接嵌入HTML）

将JavaScript代码直接写入HTML的<script>标签中,通常用于少量逻辑或临时代码。

<!DOCTYPE html>
<html>
<body>
  <h1>内联脚本示例</h1>
  <script>
    // 直接在HTML中编写JS代码
    alert("欢迎访问我的网页！");
  </script>
</body>
</html>

特点：

  • 代码与HTML混合，可读性较差
  • 适用于简单交互或快速测试
  • 无法被多页面复用

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

将JavaScript代码集中写在<script>标签内，通常放在<head>或<body>底部。

<!DOCTYPE html>
<html>
<head>
  <script>
    // 页面加载时执行
    document.addEventListener("DOMContentLoaded", function() {
      console.log("页面已加载完成");
    });
  </script>
</head>
<body>
  <h1>内部脚本示例</h1>
</body>
</html>

特点：

  • 代码与HTML分离，结构更清晰
  • 可定义页面级事件（如DOMContentLoaded）
  • 仍无法跨页面复用

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

通过<script src="路径">引入外部JS文件,推荐用于复杂逻辑或多页面复用。

<!DOCTYPE html>
<html>
<head>
  <!-引入外部JS文件 -->
  <script src="https://cdn.example.com/utils.js"></script>
  <script src="js/main.js"></script>
</head>
<body>
  <h1>外部脚本示例</h1>
</body>
</html>

特点：

  • 支持浏览器缓存，提升性能
  • 代码可维护性高，适合团队协作
  • 需注意路径正确性（相对路径/绝对路径/CDN地址）

脚本加载控制属性

属性 作用 适用场景
defer 延迟执行，等待HTML解析完成后按顺序执行 需要操作DOM元素时
async 异步加载，立即执行且不阻塞HTML解析 第三方脚本（如广告）

示例：

<script src="main.js" defer></script>
<script src="analytics.js" async></script>

动态加载脚本（通过JavaScript）

// 创建script标签并设置属性
const script = document.createElement('script');
script.src = 'https://example.com/dynamic.js';
script.onload = () => console.log('动态脚本加载完成');
document.head.appendChild(script);

常见问题与解答

问题1：外部脚本和内部脚本有什么区别？

解答：

  • 复用性：外部脚本可被多个页面共享，内部脚本仅作用于当前页面。
  • 缓存机制：外部脚本会被浏览器缓存，减少重复加载；内部脚本每次刷新页面都会重新解析。
  • 维护成本：外部脚本更易于管理和版本控制。

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

解答：

  • defer：脚本会并行下载，但延迟执行，直到HTML完全解析后按顺序执行，适合需要操作DOM的脚本。
  • async：脚本立即下载并尽快执行，不保证执行顺序，适合无依赖的第三方脚本（如统计代码）。
标签
0

相关文章