script 标签中 defer 和 async 的区别？

script 标签中 defer 和 async 的区别？

HTML渲染过程

1、渲染引擎在解析html的时候，遇到script是会暂停解析过程；
2、接着通过网络线程加载文件，完成后再切换js引擎执行代码；
3、然后再切换回渲染引擎继续解析html渲染页面。

所以首次渲染的时候如果并不依赖这个script，就会延长了页面的渲染时间，为了减少首次渲染的时间损耗，可以通过给script标签加三个属性来实现。

• async：请求文件但不阻塞渲染引擎，文件加载完成再阻塞渲染引擎先执行完js；
• defer：请求文件但不阻塞渲染引擎，等解析完html再执行js；
• type=“module”：让浏览器按ES6标准将文件当成模板解析，效果和defer一样，也可以配合async在请求完成后立即执行

小结：
defer 按顺序下载，DomContentLoad前执行，async 不按顺序下载，下载完就执行