向html页面中插入javascript代码的主要方法就是通过script标签。其中包括两种形式，第一种直接在script标签之间插入js代码，第二种即是通过src属性引入外部js文件。由于解释器在解析执行js代码期间会阻塞页面其余部分的渲染，对于存在大量js代码的页面来说会导致浏览器出现长时间的空白和延迟。
script标签存在两个属性，defer和async，因此script标签的使用分为三种情况：
1.
<script src="example.js"></script>
没有defer或async属性，浏览器会立即加载并执行相应的脚本。也就是说如果script在html渲染标签的文档之前，会不等待后续加载的文档元素，读到就开始加载和执行，此举会阻塞后续文档的渲染加载，也就是浏览器会出现空白。如果script在html渲染标签的文档之后，会导致延迟；
2.(async 属性是HTML5中新增的)
<script async src="example.js"></script>
有了async属性，表示后续文档的加载和渲染与js脚本的加载和执行是并行进行的，即异步执行；
3.(HTML4中就有了defer属性)
<script defer src="example.js"></script>
有了defer属性，加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的(异步)，js脚本的执行需要等到文档所有元素解析后渲染前。
总结：
1.defer 和 async 的共同点是都是可以异步并行加载，不会阻塞页面的加载，不同点是 defer的加载完成之后，JS会等待整个页面全部加载完成了再执行，而async是加载完成之后，会马上执行JS，所以假如对JS的执行有严格顺序的话，那么建议用 defer加载。
2.defer和async在网络加载过程是一致的，都是异步执行的；
3.两者的区别在于脚本加载完成之后何时执行，可以看出defer更符合大多数场景对应用脚本加载和执行的要求
4.如果存在多个有defer属性的脚本，那么它们是按照加载顺序执行脚本的；而对于async，它的加载和执行是紧紧挨着的，无论声明顺序如何，只要加载完成就立刻执行，它对于应用脚本用处不大，因为它完全不考虑依赖。
5.defer与async，前者要等到文档解析渲染完毕后，DOM事件调用前执行，才会执行；后者一旦加载完，就会执行这个脚本。
6.defer和async的作用基本相似，被定义的脚本将延迟到浏览器遇到html标签后再执行（所以我们平时在head里提前引入的外部库，没增加defer和async属性时，才可以提前加载）
推荐的应用场景
defer
如果你的脚本代码依赖于页面中的DOM元素，或者被其他脚本文件依赖。
例如：评论框
async
如果你的脚本并不关心页面中的DOM元素，并且也不会产生其他脚本需要的数据。
例如：百度统计
如果不太能确定的话，用defer总是会比async稳定