当你访问一个网站的时候，相关的html，css,script，图片等资源就开始了下载。一般情况下，你的html文档解析过程中如果遇到script标签，文档解析就会暂停然后开始下载并执行你的script。这个时候你的文档解析过程就被script阻塞了，如果网站有大量的script在阻塞加载，那么网站的整体性能是不高的。一个很直观的感受就是网页渲染比较慢。而且如果你的script中使用了一个未解析完成的dom，那么很显然脚本就会报错了。
历史第一阶段：
这个阶段我们采取的方案是把脚本放在</body>标签之前，做到了解析完html再加载执行脚本。对于一些第三方脚本，我们采用了动态创建script的方式（document.createElement创建script，然后挂载到html的节点中去，从而进行一个异步加载）
历史第二阶段：
H5的规范推出之后呢，我们的script天然就有了原生的异步加载功能，我们可以通过增加async或defer属性去决定脚本的异步加载方式。其中async表明脚本是异步加载且加载完即刻执行。defer表明脚本是异步加载，加载完的脚本将会在文档解析完成后于DOMContentLoaded事件前执行。对于一些有依赖关系的异步脚本，就可以使用defer，这样就可以确保他们的执行顺序。
历史第三阶段：
这里我们使用了link标签rel属性的preload（预加载资源）和prefetch(预取资源)，做到了资源的加载和执行分离，preload的脚本会被浏览器优先加载，在随后的页面渲染中，一旦需要使用它们，它们就会立即可用。而prefetch类的资源则会在浏览器空闲的时候去加载，一般用于很快就会在其他页面使用到的资源。这种方式是VUE工程化项目推荐的方式，你会发现在请求通过cli脚手架命令打包出来的项目的时候，会有下图类似的link标签去加载css和js。
有活力的技术都是会不断更新的，历史的脚步也绝对不会停滞不前。有空的时候，了解一下他们的过往，也会增加你的知识底蕴。