在网页开发中，JS脚本是实现交互逻辑的核心，而HTML作为页面结构载体，需要通过特定方式引入JS代码才能让其生效，最常用的方法就是使用<script>标签。不同的引入方式对应不同的使用场景，选择适合的方式能优化页面加载性能。
内联引入JS脚本
内联引入是最直接的方式，直接将JS代码写在<script>标签内部，不需要额外的外部文件。这种方式适合少量、仅当前页面使用的JS代码。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>内联引入JS示例</title>
</head>
<body>
<button id="btn">点击提示</button>
<!-- 内联JS代码 -->
<script>
// 获取按钮元素
const btn = document.getElementById('btn');
// 绑定点击事件
btn.addEventListener('click', function() {
alert('你点击了按钮');
});
</script>
</body>
</html>外部文件引入JS脚本
外部引入是将JS代码写在独立的.js文件中，再通过<script>标签的src属性指定文件路径，这是实际开发中最推荐的方式，便于代码复用和维护。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>外部引入JS示例</title>
<!-- 引入外部JS文件 -->
<script src="main.js"></script>
</head>
<body>
<p>页面内容</p>
</body>
</html>对应的main.js文件内容如下：
// main.js中的代码
console.log('外部JS文件加载完成');
function showMessage() {
console.log('这是外部定义的函数');
}script标签的defer和async属性
当使用外部引入方式时，script标签的加载和执行会影响页面渲染速度，defer和async属性可以优化这个过程，两者的区别如下：
| 属性 | 加载时机 | 执行时机 | 适用场景 |
|---|---|---|---|
| defer | HTML解析时并行加载 | HTML解析完成后、DOMContentLoaded事件前按顺序执行 | 依赖DOM或其他脚本的JS文件 |
| async | HTML解析时并行加载 | 加载完成后立即执行，顺序不固定 | 不依赖其他脚本的独立统计、广告类JS |
defer属性使用示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>defer示例</title>
<!-- 延迟执行，等待HTML解析完成 -->
<script src="dom-operate.js" defer></script>
</head>
<body>
<div id="content">内容区域</div>
</body>
</html>async属性使用示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>async示例</title>
<!-- 加载完成后立即执行，不保证顺序 -->
<script src="analytics.js" async></script>
</head>
<body>
<p>页面内容</p>
</body>
</html>引入JS的注意事项
- 外部引入时，<script>标签内部不要写JS代码，写了也不会执行，浏览器会忽略内部内容。
- 如果脚本不需要操作DOM，尽量放在<head>中并使用defer或async属性，避免阻塞页面渲染。
- 操作DOM的脚本建议放在<body>标签末尾，或者添加defer属性，确保DOM已经解析完成。
- 路径要正确，相对路径是相对于当前HTML文件的位置，绝对路径要写全正确的地址，比如本地测试可以用<script src="http://127.0.0.1:8080/app.js"></script>。
掌握这些HTML引入JS脚本的方式，就能根据开发需求选择最合适的方案，既保证代码可维护性，也能优化页面的加载性能。
HTMLJavaScriptscript标签JS引入方式修改时间：2026-06-04 05:43:05