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 不按顺序下载,下载完就执行