前端优化，script异步加载，defer 与 async 的作用与区别

前端优化中有一项优化方式，就是延迟 js 脚本的加载与执行，因为 js 脚本的执行会阻塞页面渲染，为了尽快让用户看到界面，我们通常会延迟或异步 javascript 的代码执行。
其中常用的方式就有直接将 script 标签移动至 body 标签之后、使用 script 标签的 defer 属性 或 async 属性。

为什么 javascript 会阻塞页面渲染

简单的说就是因为 js 在执行过程中很有可能会查询修改 dom，如果同时运行的话很大概率会出现查询修改的 dom 还未渲染导致出错。

defer 的作用

defer 属性使用来告诉浏览器该 scirpt 应该在文档解析完成之后，在触发 DomContentLoaded 事件之前执行。
这个属性只针对外链 script 脚本有效果，对内嵌的 js 脚本没有用（也就是对没有 src 属性的 script 标签没有用）。

async 的作用

async 属性告诉浏览器异步执行该 js 脚本，先把脚本下载下来，在合适的时候在执行。
脚本的执行一定会在页面的 load 事件之前，但在 DOMContentLoaded 事件触发之前或之后执行都有可能。async 属性同样对内嵌的 js 脚本无效。

注意：标记为 async 的 js 脚本不保证脚本之间的执行先后顺序，所以必须确保异步执行的脚步是独立的，不依赖于其他异步的脚本

defer 与 async 的异同

① defer 和 async 都是异步去加载外部 JS 脚本。

② async 是在外部 JS 加载完成后，浏览器空闲时，Load事件触发前执行；而 defer 是在JS加载完成后，整个文档解析完成后执行。

③ defer 更像是将 script 标签放在 body 标签之后的效果，但是因为他是异步加载 JS 文件，所以可以节省部分时间。