上一篇
html中引入js
在HTML中引入JS可通过`
标签内联或使用src`属性链接外部文件。（4
在HTML中引入JavaScript的几种方式
直接在HTML中编写脚本（内联脚本）
| 步骤 | 说明 | 示例代码 |
|---|---|---|
使用<script> | 在<head>或<body>中插入<script> | <script>alert("Hello World");</script> |
| 脚本执行时机 | 未指定defer/async时，立即同步执行 | 放在<head>中会阻塞后续内容渲染 |
| 推荐位置 | 通常放在<body>标签底部 | 保证页面内容先加载，减少白屏时间 |
引入外部JavaScript文件
| 步骤 | 说明 | 示例代码 |
|---|---|---|
| 创建外部JS文件 | 如script.js，写入函数或代码 | // script.js<br>function sayHi() { alert("Hi!"); } |
使用<script>引入 | 通过src属性指定文件路径 | <script src="js/script.js"></script> |
| 路径处理 | 相对路径（如js/script.js）或绝对路径 | 根目录文件可直接用src="/script.js" |
异步/延迟加载脚本
| 属性 | 作用 | 示例代码 |
|---|---|---|
defer | 延迟执行（DOM解析完成后执行） | <script src="main.js" defer></script> |
async | 异步执行（下载完成立即执行，不保证顺序） | <script src="analytics.js" async></script> |
ES6模块化导入
| 步骤 | 说明 | 示例代码 |
|---|---|---|
设置type="module" | 启用ES6模块规范 | <script type="module" src="app.js"></script> |
使用import语句 | 在JS文件中导入模块 | // app.js<br>import { add } from './math.js'; |
| 导出模块内容 | 使用export关键字暴露接口 | // math.js<br>export function add(a,b) { return a+b; } |
相关问题与解答
Q1：内联脚本和外部脚本的主要区别是什么？
A1：
- 维护性：外部脚本可复用，内联脚本分散在HTML中难以管理
- 加载性能：外部脚本可被缓存，内联脚本每次需重新下载
- 执行时机：内联脚本立即执行，外部脚本按
defer/async属性控制
Q2：defer和async属性的核心区别是什么？
A2：
- 执行顺序：
defer保证按顺序执行，async不保证执行顺序 - 渲染影响：
defer脚本会在DOM解析完成后执行，async可能中断关键渲染流程 - 适用场景：
defer适合主程序脚本，async适合第三方异步功能（如广告、
