defer属性

• defer属性告诉浏览器不需要等待脚本下载，而继续解析HTML，构建DOM Tree
  • 脚本会由浏览器来进行下载，但是不会阻塞DOM Tree的构建过程；
  • 如果脚本提前下载好了，它会等待DOM Tree构建完成，在DOMContentLoaded事件之前先执行defer中的代码
• 所以DOMContentLoaded总是会等待defer中的代码先执行完成

<script defer src="./js/defer-demo.js"></script>
<script>
    window.addEventListener("DOMContentLoaded", () => {
        consolo.log("DOMContentLoaded")
    })
</script>

• 多个带defer的脚步是可以保持正确的顺序执行的
• 从某个角度来说，defer可以提高页面的性能，并且推荐放到head元素中
• 注意：defer仅适用于外部脚本，对与script默认内容会被忽略

async 属性

• async 特性与defer有些类似，它也能够让脚本不阻塞页面
• async 是让一个脚本完全独立的
  • 浏览器不会因async脚本而阻塞（与defer类似）
  • async脚本不能保证顺序，它是独立下载、独立运行、不会等待其他脚本
  • async不能保证在DOMContentloaded之前或者之后执行

  <script>
      window.addEventListener("DOMContentLoaded", () => {
          console.log("DOMContentLoaded")
      })
  </script>
  <script async src="./js/async-demo.js"></script>
  

• defer通常用于需要在文档解析后操作DOM的JavaScript代码，并且对多个script文件有顺序要求
• async通常用于独立的脚本，对于其他的脚本，甚至DOM没有依赖的