图解 script 标签中的 async 和 defer 属性
<script>
- 当浏览器解析到这个标签时，它会立即停止解析HTML文档，转而去加载并执行这个脚本。
- 这意味着如果将
<script>放在页面顶部，它可能会延迟整个页面的加载速度，因为浏览器必须等待脚本执行完毕才能继续解析HTML。
<script async>
async属性告诉浏览器该脚本可以在后台异步下载，而不会阻塞HTML文档的解析。- 脚本一旦下载完成就会被执行，这可能是在HTML解析完成之前或之后，取决于脚本下载所需的时间。
- 适用于那些不依赖于其他脚本且不需要操作DOM的独立脚本，如分析脚本。
<script defer>
defer属性也允许脚本异步下载，但它保证了脚本会在HTML文档完全解析完成后，但在DOMContentLoaded事件触发前执行。- 如果页面中有多个设置了
defer的脚本，它们会按照在文档中出现的顺序执行。 - 适用于需要操作DOM的脚本，因为它确保了脚本运行时所有的DOM元素都已准备好。
使用场景
1.脚本之间没有依赖关系的，使用sync
2.脚本之间有依赖关系的，使用defer
3.若同时使用sync和defer，defer不起作用，sync生效