明确: defer 和 async 的使用, 可以用于提升网页性能
script标签存在两个属性，defer和async，因此 script标签 的使用分为三种情况：
-
<script src="example.js"></script>没有defer或async属性，浏览器会立即加载并执行相应的脚本。
不等待后续加载的文档元素，读到就开始加载和执行，此举会阻塞后续文档的加载
-
<script async src="example.js"></script>有了async属性，表示后续文档的加载和渲染与js脚本的加载和执行是并行进行的，即异步执行；
-
<script defer src="example.js"></script>有了defer属性，加载后续文档的过程和js脚本的加载是并行进行的(异步)，此时的js脚本仅加载不执行, js脚本的执行需要等到文档所有元素解析完成之后，DOMContentLoaded事件触发执行之前。
下图是使用了 defer、async、和未使用时的运行情况对比：
【上图的图例说明】
绿线：HTML 的解析时间
蓝线：JS 脚本的加载时间
红色：JS 脚本的执行时间
从图中我们可以明确一下几点：
1.defer和async在网络加载过程是一致的，都是异步执行的；(放在页面顶部, 也不会阻塞页面的加载, 与页面加载同时进行)
2.两者的区别, 脚本加载完成之后, async是立刻执行, defer会等一等 (等前面的defer脚本执行, 等dom的加载)
所以, js脚本加上 async 或 defer, 放在头部可以减少网页的下载加载时间, 如果不考虑兼容性, 可以用于优化页面加载的性能
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.0/index.js"></script>
