script标签中defer和async

1、 <script src="example.js"></script>

script不添加async、defer异步属性时，浏览器会立即加载并执行相应的js脚本，不等待后续加载的文档元素，读到就开始加载和执行，会阻塞后续文档的加载。

2、 <script async src="example.js"></script>

script添加async属性，表示后续文档的加载和渲染与js脚本的加载和执行是并行进行的，即异步执行。执行会阻塞HTML解析。
ps：和js脚本的执行是并行进行，我不太理解。

3、 <script defer src="example.js"></script>

script添加defer属性，加载后续文档的过程和js脚本的加载是并行进行的，此时的js脚本仅加载不执行，js脚本的执行需要等到文档所有元素解析完成之后，DOMContentLoaded事件触发执行之前。

js脚本加上async或defer，放在头部可以减少网页的下载加载时间，如果不考虑兼容性，可以用于优化页面加载的性能。

执行条件

defer和async是两个布尔值属性，只在使用src属性的script标签上起作用。
若defer和async属性同时存在，则async起作用。