Script标签
目录
警告
本文最后更新于 2022-09-20，文中内容可能已过时。
async 和 defer
一般情况下，脚本<script>会阻塞 DOM 的构建，DOM 的构建又影响到 DOMContentLoaded 的触发。
问题：
- 阻塞页面渲染
- 获取不到
<script>下面的 DOM
解决方法就是使用 async 和 defer
这两个特性都只针对于外部脚本，不具有 src 的脚本，则这两个特性会被忽略
defer
defer 的脚本不会阻塞 DOM 的渲染，总要等待 DOM 解析完成,但是在 DOMContentLoaded 之前完成。
注意：defer 的多个脚本下载完成后会按照文档的先后顺序执行，而不是下载顺序
async
与 defer 一样，都不会阻塞 DOM 渲染
但是 async 意味着完全独立，不会等待也不会让别人等待，加载完成后就立即执行。
与 DOMContentLoaded 无关，可能在之前，也可能在之后执行。
注意：动态创建并加载的 script 脚本与 async 效果一致
场景
在实际开发中，defer 用于需要整个 DOM 的脚本，和/或脚本的相对执行顺序很重要的时候。
async 用于独立脚本，例如计数器或广告，这些脚本的相对执行顺序无关紧要。