关于HTML "script" 标签的defer/async属性功能和差异的随记

首先，"script"标签的作用是用于嵌入或引用可执行脚本。

"script"标签在 HTML 世界中的角色能力出现过一次enhance，那就ES module标准被正式发布并得到了广泛支持。

此时，"script"标签的 type 属性也随之新增一个闪耀的属性值，"module"。即该模块所包含的脚本代码将会被作为JavaScript模块来处理。

See details: https://hacks.mozilla.org/2015/08/es6-in-depth-modules/

 

回到正题，看下它们的 区别：

1. 当"script"标签未设置defer属性和async属性

当浏览器解析到脚本标签后会立即被请求加载并执行相应代码（GUI引擎切换到JS引擎），相关流程结束会持续阻塞后续代码的解析、加载和绘制；

2. 当"script"标签被标记上defer属性

注：需要设置src属性，defer才可生效。另外如果type被设置为了module，那么defer也将不起作用（因为模块脚本默认以defer模式加载）

该脚本将在html文档完成解析之后，触发DOMContentLoaded事件之前执行。（可以理解为：script加载完成后，如果html解析渲染尚未完成，则不会立即执行，而是等待）

设置了defer属性的脚本会阻止DOMContentLoaded事件的执行，直到其自身被加载并解析完成。

3. 当"script"标签被标记上async属性

(1) 对于普通script脚本，在html解析过程，遇到该script标签后会发起请求（不阻塞DOM渲染），加载完成后将尽快地被解析和执行（阻塞当前进行中的html解析和渲染）；

该属性可消除script标签阻塞页面渲染的特性（defer也有一些类似作用）

(2) 对于模块脚本，其自身以及相关依赖会被推入延迟队列中等待被执行，同样也将会被以并行的形式请求加载。