script标签async和defer的区别及作用
script元素，是向HTML页面插入JavaScript的主要方法，由Netscape创造。
定义了6个属性：
- async: 表示立即下载脚本，但不妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。
- defer: 表示脚本可以延迟到文档完全被解析和显示之后执行，只对外部脚本有效。IE7及更早版本都支持.
- charset: 表示通过src属性指定的代码的字符集
- language: 已废弃
- src: 表示包含要执行代码的外部文件资源
- type:可以看成是language的替代属性，默认是text/javascript
只要script标签不包含async和defer属性，浏览器都会按照script元素在页面中出现的顺序对他们依次进行解析。
优化页面加载性能：
- script标签的位置：置于之前，用户会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了。
- 延迟脚本：给script标签加defer属性，这些脚本会先于DOMContentLoaded事件执行。现实中，浏览器不一定会按照顺序执行，所以最后只包含一个延迟脚本
- 异步脚本：给script标签加async属性，告诉浏览器立即下载文件，目的是不让页面等待脚本的下载和执行，从而异步加载页面其他内容。建议异步脚本中不要在加载期间修改dom。异步脚本一定会在页面的load事件前执行，但可能会在DOMContentLoaded事件触发之前或之后执行
区别：
没有defer和async: 遇到就加载并执行，阻塞HTML解析
defer: 遇到就异步加载，延迟到，在所有元素完成解析之后，DOMContentLoaded事件完成之前执行
async: 遇到异步加载，异步执行
async是没有顺序的，defer有明显的顺序执行关系
如果同时使用async和defer,将呈现async`的特性
