理解JS中script标签defer和async属性

1.<script src="example.js"></script>
基本用法，无async或defer属性，浏览器会立即加载并执行相应的脚本。也就是说在渲染script标签之后的文档之前，不等待后续加载的文档元素，读到就开始加载和执行，这样会阻塞后续文档的加载；

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

加上async属性，表示后续文档的加载+渲染与js脚本的加载+执行是并行进行的，即异步执行；

兼容性： async兼容性

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

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

兼容性： defer兼容性