JavaScript 标签加载

目录

• [JavaScript 标签加载](#JavaScript 标签加载)
• • [script 标签的 async 和 defer 属性，分别代表什么，有什么区别](#script 标签的 async 和 defer 属性，分别代表什么，有什么区别)
  • • [1. 普通 script 标签](#1. 普通 script 标签)
    • [2. async 属性](#2. async 属性)
    • [3. defer 属性](#3. defer 属性)
    • [4. type="module"](#4. type="module")
    • [5. 各种加载方式的对比](#5. 各种加载方式的对比)
    • [6. 使用建议](#6. 使用建议)

---

JavaScript 标签加载

script 标签的 async 和 defer 属性，分别代表什么，有什么区别

标准答案：

1. 普通 script 标签

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

• 加载和执行都会阻塞 HTML 解析
• 按照在文档中的顺序执行
• 在全局作用域中执行
• 可以访问全局变量和函数
• 不支持跨域加载（除非设置 CORS）

2. async 属性

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

• 异步加载脚本，不阻塞 HTML 解析
• 加载完成后立即执行，可能会中断 HTML 解析
• 适用于独立脚本，如第三方统计、广告等
• 执行顺序不保证，谁先加载完谁先执行
• 在全局作用域中执行
• 可以访问全局变量和函数
• 不支持跨域加载（除非设置 CORS）

3. defer 属性

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

• 异步加载脚本，不阻塞 HTML 解析
• 等待 HTML 解析完成后，DOMContentLoaded 事件前执行
• 多个 defer 脚本按照在文档中的顺序执行
• 适用于需要操作 DOM 或依赖页面结构的脚本
• 在全局作用域中执行
• 可以访问全局变量和函数
• 不支持跨域加载（除非设置 CORS）

4. type="module"

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

• 异步加载脚本，不阻塞 HTML 解析
• 默认具有 defer 属性，等待 HTML 解析完成后执行
• 支持 ES6 模块系统，可以使用 import/export
• 严格模式（'use strict'）下执行
• 具有自己的作用域，不会污染全局作用域
• 支持跨域加载（需要设置 CORS）
• 只能通过 HTTP(S) 协议加载，不能通过 file:// 协议加载
• 模块只会被加载一次，即使多次引用也只会执行一次
• 模块加载顺序按照 import 语句的顺序执行

5. 各种加载方式的对比

特性	普通 script	async	defer	type="module"
加载方式	同步	异步	异步	异步
执行时机	立即执行	加载完立即执行	HTML 解析完成后执行	HTML 解析完成后执行
执行顺序	按文档顺序	不保证顺序	按文档顺序	按 import 顺序
作用域	全局	全局	全局	模块作用域
严格模式	可选	可选	可选	强制
跨域支持	需要 CORS	需要 CORS	需要 CORS	需要 CORS
协议要求	无	无	无	必须 HTTP(S)
模块支持	不支持	不支持	不支持	支持
重复加载	会重复执行	会重复执行	会重复执行	只执行一次

6. 使用建议

1. 普通 script：

   • 适用于简单的脚本
   • 需要立即执行的脚本
   • 对加载顺序有严格要求的脚本

2. async：

   • 适用于独立的第三方脚本
   • 不依赖 DOM 的脚本
   • 统计、分析等工具脚本

3. defer：

   • 适用于需要操作 DOM 的脚本
   • 依赖页面结构的脚本
   • 需要按顺序执行的脚本

4. type="module"：

   • 适用于现代 JavaScript 应用
   • 需要模块化的代码
   • 需要严格作用域的代码
   • 需要代码复用的场景