异步加载脚本

[yym-yumeng123]

向HTML页面中插入JavaScript的方法,就是使用<script>标签,我们先来了解一下<script>定义了6个属性

• async:异步脚本可选,表示立即下载脚本,但不妨碍页面中其他操作,只对外部脚本有效
• defer:延迟脚本可选.表示脚本可以延迟到文档完全被解析和显示之后再执行.只对外部脚本文件有效
• charset:可选,表示通过src属性指定的代码的字符集,由于大多数浏览器会忽略这个值,因此属性很少用
• src:可选,表示包含要执行的外部文件
• language:已废弃
• type:可选,可以看成是language的替代属性

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

• 没有 defer 或async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行

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

• 有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。
• async不保证按照它们的先后顺与执行
• 异步脚本一定会在页面的load事件前执行

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

• 有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但 script.js的执行要在所有元素解析完成之后，DOMContentLoaded事件触发之前完成。
• 脚本延迟到文档解析和显示后执行，有顺序