script 标签中 defer 和 async 的区别

类别：htmlcss / 日期：2023-02-05 / 浏览：244 / 评论：0

如果没有defer或async属性，浏览器会立即加载并执行相应的脚本。 它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样 就阻塞了后续文档的加载。

下图可以直观的看出三者之间的区别:

其中蓝色代表 js 脚本网络加载时间，红色代表 js 脚本执行时间，绿 色代表 html 解析。

defer 和 async 属性都是去异步加载外部的 JS 脚本文件，它们都不 会阻塞页面的解析，其区别如下：

执行顺序：多个带 async 属性的标签，不能保证加载的顺序；多个带 defer 属性的标签，按照加载顺序执行；

脚本是否并行执行：async 属性，表示后续文档的加载和执行与 js 脚本的加载和执行是并行进行的，即异步执行；defer 属性，加载后 续文档的过程和 js 脚本的加载(此时仅加载不执行)是并行进行的(异步)，js 脚本需要等到文档所有元素解析完成之后才执行， DOMContentLoaded 事件触发执行之前。-script