下面简单比较一下defer属性和async属性使用。
defer属性
defer属性的作用：解决脚本文件下载阻塞网页渲染的问题。
defer的运行流程如下：
第1步，浏览器开始解析HTML网页。
第2步，解析过程中，如果发现带有defer属性的script标签。
第3步，浏览器继续往下解析HTML网页，同时并行下载script标签中的外部脚本。
第4步，浏览器完成解析HTML网页，此时再执行下载的脚本。
设置defer属性，浏览器下载脚本文件的时候，不会阻塞页面渲染。下载的脚本文件在DOMContentLoaded事件触发前执行（即刚刚读取完</html>标签），而且可以保证执行顺序就是它们在页面上出现的顺序。
对于内置而不是加载外部脚本的script标签，以及动态生成的script标签，defer属性不起作用。另外，使用defer加载的外部脚本不应该使用document.write方法。
async属性
async属性的作用：使用另一个进程下载脚本，下载时不会阻塞渲染。
async的运行流程如下：
第1步，浏览器开始解析HTML网页。
第2步，解析过程中，发现带有async属性的script标签。
第3步，浏览器继续往下解析HTML网页，同时并行下载script标签中的外部脚本。
第4步，脚本下载完成，浏览器暂停解析HTML网页，开始执行下载的脚本。
第5步，脚本执行完毕，浏览器恢复解析HTML网页。
async属性可以保证脚本下载的同时，浏览器继续渲染。注意，一旦采用这个属性，就无法保证脚本的执行顺序。哪个脚本先下载结束，就先执行那个脚本。另外，使用async属性的脚本文件中，不应该使用document.write方法。
defer属性和async属性到底应该使用哪一个？
一般来说，如果脚本文件之间没有依赖关系，就使用async属性；如果脚本之间有依赖关系，就使用defer属性。如果同时使用async和defer属性，后者不起作用，浏览器行为由async属性决定。