[TOC]
参考链接
图解 script 标签中的 async 和 defer 属性
阿晨资源库:defer && async(提了load事件,DOMContentLoaded事件)
script 标签中 defer 和 async
区别
<script>
:会阻碍 HTML 解析,只有下载好并执行完脚本才会继续解析 HTML。
<script async>
:解析 HTML 过程中进行脚本的异步下载,下载成功立马执行,有可能会阻断 HTML 的解析。
<script defer>
:完全不会阻碍 HTML 的解析,解析完成之后再按照顺序执行脚本。
补充
<script type="module" src="main.mjs"></script>
模块脚本
async
对于普通脚本,如果存在 async
属性,那么普通脚本会被并行请求,并尽快解析和执行。
对于模块脚本,如果存在 async
属性,那么脚本及其所有依赖都会在延缓队列中执行,因此它们会被并行请求,并尽快解析和执行。
defer
如果缺少 src
属性(即内嵌脚本),该属性不应被使用,因为这种情况下它不起作用。
defer
属性对模块脚本没有作用 —— 他们默认 defer。
使用
- 如果脚本是模块化的并且不依赖任何其他脚本,那么使用
async
。 - 如果脚本依赖其他脚本 或 被其他脚本依赖,则使用
defer
。 - 如果脚本很小并且被
async
脚本依赖,则使用不带任何属性的内联<script>
放置在async
脚本的上方。