浅谈script中的defer与async

一直没有在script上使用过别的属性，今天看基础代码才发现这个，搜索、记录下，以便记忆。

你们都知道，js加载会形成阻塞，阻碍页面的继续渲染。

defer:

js与页面同步加载，不阻碍页面渲染，会在页面渲染完成后执行js。

async:

js与页面同步加载，不会阻碍页面的渲染，但在js加载完成后会当即执行，这时会形成阻塞，知道js执行完成继续渲染页面。

下图来自网络，能够很好的说明这两个的区别：

蓝色线表明网络读取，红色线表明执行时间，这俩都是针对脚本的，绿色线表明 HTML 解析。