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

html加载js

admin
行业动态
2025-05-12
9

HTML加载JS需用` ，可置于 或 内，推荐放于`前以优化加载

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

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

特点	说明
执行时机	立即同步执行，阻塞后续代码（HTML解析和脚本执行）
用途	少量逻辑、快速测试、无需复用的代码
缺点	代码冗余、难以维护、增加HTML文件体积

示例：

<!DOCTYPE html>
<html>
<head>
  <script>
    console.log('内联脚本执行'); // 页面加载时立即执行
  </script>
</head>
<body>
  <h1>内联脚本示例</h1>
</body>
</html>

内部脚本（在`<head>`或`<body>`中引用外部JS文件）

通过<script src="path/to/file.js"></script>引入外部JS文件。

属性	说明
`src`	指定外部JS文件路径
`type`	默认为`text/javascript`，可省略
`async`	异步加载（不保证执行顺序）
`defer`	延迟加载（DOM加载完成后执行）

示例：

<!DOCTYPE html>
<html>
<head>
  <script src="main.js" defer></script> <!-延迟加载 -->
</head>
<body>
  <h1>外部脚本示例</h1>
</body>
</html>

外部脚本（独立JS文件）

将JS代码写入独立文件（如main.js），通过<script>标签引用。

html加载js 第1张

优势	说明
复用性	多个页面共享同一脚本
维护性	分离逻辑与结构，便于管理
缓存	浏览器可缓存JS文件，减少重复加载

示例（main.js）：

document.addEventListener('DOMContentLoaded', () => {
  console.log('外部脚本执行'); // DOM加载完成后执行
});

异步与延迟加载对比

属性	行为	执行时机	脚本顺序
`async`	异步加载	下载完成立即执行	不保证顺序
`defer`	延迟加载	DOM加载完成后执行	按顺序执行

示例：

<script src="script1.js" defer></script>
<script src="script2.js" defer></script>
<!-script1 先于 script2 执行 -->

动态加载脚本（通过JS创建

<script>
适用于条件加载或异步操作。
示例：
<script>
  const script = document.createElement('script');
  script.src = 'dynamic.js';
  script.onload = () => console.log('动态脚本加载完成');
  script.onerror = () => console.error('动态脚本加载失败');
  document.head.appendChild(script);
</script>
 
模块化加载（ES6 Module）
使用<script type="module">引入模块化JS文件。
示例：
<script type="module" src="module.js"></script>
 
常见问题与解答
问题1：如何确保多个脚本按顺序执行？
解答：
  使用defer属性：多个defer脚本会按顺序执行。 
 手动控制：在脚本内部通过事件或回调函数确保依赖关系。 
 避免async：async脚本不保证执行顺序。
 
问题2：如何判断外部脚本是否加载成功？
解答：
  监听onload事件：在<script>标签或动态创建的脚本中添加onload回调。 
 监听onerror事件：捕获加载失败的情况。 
 示例（动态加载）： const script = document.createElement('script');
script.src = 'example.js';
script.onload = () => alert('脚本加载成功');
script.onerror = () => alert('脚本加载失败');
document.head.appendChild(script);