使用 defer 和 async 加载 script 的区别

推荐讨论区：defer 和 async 的区别

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

浏览器是多线程的，但是JS执行线程和渲染线程是互斥的，这就意味着，要么先DOM渲染完，要么JS先执行完。不过，网络读取的线程和渲染线程并不是互斥的，所以可以边渲染页面边下载JS文件。当下载完后根据 defer 和 async 属性，去选择是等DOM渲染完后再执行JS，还是下载完后立刻暂停DOM渲染，然后立马执行JS脚本。

不使用任何属性	defer	async
渲染时碰见script标签，暂停DOM渲染，先下载脚本，下载完后执行脚本。代码执行完后再渲染DOM	渲染时边下载脚本，下载完后先不执行JS代码，等DOM渲染完后再执行JS代码	渲染时边下载脚本，下载完后立马执行JS代码，先中断 DOM 的渲染