html引用js

HTML引用JavaScript的常见方式

直接在HTML中嵌入脚本（内联脚本）

1. 语法格式：

   <script>
       // JavaScript代码
       alert("欢迎访问本站！");
   </script>

2. 特点：
   • 脚本直接写在<script>标签内
   • 页面加载时立即执行
   • 适合少量、页面专属的脚本

引用外部JavaScript文件

1. 语法格式：

   <script src="path/to/script.js"></script>

2. 实现步骤：
   | 步骤 | 说明 |
   |————–|———————————————————————-|
   | 1. 创建JS文件 | 在项目目录中创建script.js，写入JavaScript代码 |
   | 2. 引入文件 | 通过<script>标签的src属性指定文件路径 |
   | 3. 缓存机制 | 浏览器会缓存外部JS文件，重复访问时直接读取缓存（可通过版本号强制刷新）|

3. 示例：

   

   <!-正确引用 -->
   <script src="js/utils.js"></script>
   <!-带版本号的强制刷新 -->
   <script src="js/main.js?v=1.2"></script>

异步与延迟加载脚本

1. defer属性：

   • 作用：延迟执行脚本，但保持脚本执行顺序
   • 示例：

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

   • 执行流程：
     1. 下载并解析HTML文档
     2. 并行下载外部JS文件
     3. DOM完全构建后按顺序执行defer脚本

2. async属性：

   • 作用：异步加载脚本，不保证执行顺序
   • 示例：

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

   • 执行流程：
     1. 下载并解析HTML文档
     2. 并行下载并立即执行脚本（可能打断HTML解析）

ES6模块化导入

1. 基本语法：

   <script type="module" src="app.js"></script>

2. 特点：

   • 需设置type="module"属性
   • 支持import/export语法
   • 自动开启严格模式（strict mode）

3. 示例：

   <!-主模块 -->
   <script type="module" src="main.js"></script>
   <!-main.js -->
   import { greet } from './utils.js';
   greet('用户');

相关问题与解答

Q1：如何选择defer和async？

A：

• 使用defer：当脚本依赖DOM元素或需要按顺序执行多个脚本时（如主程序脚本）。
• 使用async：当脚本独立且不阻塞页面（如广告代码、分析工具）。

Q2：外部脚本未生效的可能原因？

A：

1. 路径错误：检查src路径是否正确（相对路径/绝对路径）。
2. 网络问题：文件未成功加载（可查看浏览器控制台报错）。
3. 执行顺序：脚本依赖的DOM元素尚未加载（可添加defer或包裹在DOMContentLoaded事件中）。
4. 缓存问题：旧版本脚本未更新（添加版本查询参数或