script 标签中 defer 和 async 的区别

在正常的 script 标签加载过程中, 当解析到 script 标签时, 渲染引擎会停止渲染(反映到客户端上就是浏览器没有继续显示内容), 从而去请求 src 的链接, 直到请求成功后执行脚本完才继续渲染页面. 这就会给用户造成页面卡顿的体验. defer和async都是解决方案.

带有defer的 script 标签不会立即执行, 而是等待文档被解析完毕后才去执行.

带有async的 script 标签也不会立即执行, 而是在 script 标签下载完毕时去执行.

因此, 多个defer标签同时存在时, 它们的执行顺序是按照上下结构依次执行的; 而多个async标签同时存在时则根据请求时间来决定执行顺序: 即花费时间越少的脚本越先执行.