script 标签中的 async 和 defer 属性

普通script，加async，加defer的区别

普通JS

普通JS的下载和解析都会影响DOM解析

async

当浏览器遇到async属性的脚本时，会开始异步下载脚本，并在下载完后立即执行，脚本的加载不会阻塞页面后续元素的解析和渲染，但执行会阻塞后续元素渲染。

defer

动态插入的JS

和async标签 一致。插入后下载，下载完毕后可能阻塞DOM解析。

内联JS

对于内联js脚本，无论加什么属性，都会立即执行。

一个特殊事件DOMContentLoaded

含义：
1、DOMContentLoaded是一个事件，当HTML文档在浏览器中被完全加载和解析完成之后，触发该事件。
2、该事件与页面中的CSS和JS资源无关，仅限于DOM树的构建完成。因此，一些图片、JS文件等外部资源可能还没有加载完成。

普通JS

按照排列顺序依次执行，下载和执行的过程会阻塞解析HTML，并在DOMContentLoaded回调函数执行之前执行完毕。

async

异步下载，先下载完先执行，执行时如果DOM未解析完成，则会阻塞解析HTML，与DOMContentLoaded事件无时间先后关系，仅取决于下载完的时间节点。

defer

先下载完所有脚本，再依次执行，下载与执行都不会阻塞解析HTML，并在DOMContentLoaded回调函数执行之前执行完毕。

使用

• 如果脚本独立且不依赖其他脚本或页面内容，且不影响首次渲染性能，可以选择使用async。
• 如果脚本需要在 DOM 构建完成后执行，或有其他脚本或页面内容的依赖关系，应选择defer。

参考文档：图解 script 标签中的 async 和 defer 属性