JS - 延迟加载JS的方式

延迟加载JS的两种方式:

1. async
2. defer
   下面展示一些 内联代码片。

// 引入外部链接
<script defer type='text/javascript' src='script.js'/>

<script async type='text/javascript' src='script.js'/>

渲染的流程

1. < script > 不添加任何属性

HTML会先被解析 $\to$ 遇到引入的JS脚本，解析过程中会暂停 $\to$ 解析JS脚本并执行 $\to$ 继续解析HTML

2. < script async>

流程：HTML和JS脚本并行解析 $\to$ 暂停解析HTML，执行JS脚本 $\to$ 继续解析HTML
特点：html和JS脚本是同步解析的，不是顺次执行的（谁先加载完，谁先执行）

3. < script defer>

流程：HTML和JS脚本并行解析 $\to$ 继续解析HTML $\to$ HTML被解析完后，再执行JS脚本

特点：等HTML全部解析完，才会执行JS脚本，顺次执行