<script>元素的defer和async属性

前置：

• DOMContentLoaded：当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待依赖资源的加载。
• load: 当整个页面及所有依赖资源如样式表和图片都已完成加载时，将触发load事件。

推迟执行脚本defer对比异步执行脚本async

• async
  1. 下载完立即执行，异步脚本保证会在页面的 load 事件前执行，但可能会在DOMContentLoaded事件触发之前或之后。
  2. 异步脚本并不保证能按照它们出现的次序执行。
• defer
  1. 下载完延迟执行，脚本不阻塞页面；要等到DOM解析完毕，但在DOMContentLoaded事件触发之前执行。
  2. 延迟脚本总是按照指定他们的顺序执行。 两者也都只适用于外部脚本，都会告诉浏览器立即开始下载。

图解