JavaScript标签中的defer和async的作用和区别

1.普通<script>标签,浏览器解析从上往下解析,普通情况下遇到script标签,就会暂停实行HTML的解析,会等待<script>标签下载完成并且执行完后在继续往下执行HTML的解析

2.defer只适用于外联的<script>标签,当解析HTML时遇到带有defer且属性为true的<script>标签,HTML并不会停止解析,而是在后台并行的下载<script>标签,等HTML解析完后,在来执行<script>标签,且执行顺序与在HTML中的位置相对于,且只有<scritp>执行完毕后才在执行DOMContentLoad

3.async同样只适用于外联的<script>标签。当解析到带有async属性且为true的<script>标签时,浏览器会在后台默默下载<script>标签,一旦下载完就立即执行,而不管标签在HTML中的顺序,也不管是否到DOMContentLoad触发阶段。

一下博客更为详细:

script 标签的 defer 与 async 属性_script标签的defer和async属性_mrlmx的博客-CSDN博客