一图看懂 script 标签中 defer 和 async 的区别

浏览器渲染过程中遇到 JS 文件怎么处理？

  JavaScript 的加载、解析与执行会 阻塞文档的解析，也就是说，在构建 DOM 时，HTML 解析器若遇到了 JavaScript，那么它会暂停文档的解析，将控制权移交给 JavaScript 引擎，等 JavaScript 引擎运行完毕，浏览器再从中断的地方恢复继续解
析文档。

  也就是说，如果你想首屏渲染的越快，就越不应该在首屏就加载 JS 文件，这也是都建议将 script 标签放在 body 标签底部的原因。当然在当下，并不是说 script 标签必须放在底部，因为你可以给 script 标签添加 defer 或者 async 属性。



解析 HTML 用的是 GUI渲染线程，执行 js 代码用的是 js引擎线程
这两个线程互斥，即当js引擎线程运行时，GUI线程会被挂起，当js引擎线程结束运行时，才会继续运行GUI线程，所以 HTML 的解析 和 js 的执行不能同时进行

相同：async 和 defer 都能实现 Script 的 异步加载 不同： 执行时机不一样， async 在加载 script 后立刻执行，defer 在 DOM 解析完成后执行 因为 是与 HTML 同时异步加载，所以 script 中需要获取 DOM元素还是要在 DOMContentLoaded 事件回调中获取

文章参考：https://segmentfault.com/q/1010000000640869