HTML资源加载优化

async和defer

​​​​​​​<script async src="http://.../a.js" />
​​​​​​​<script defer src="http://.../b.js" />

在页面中都会加载脚本文件，而加载脚本文件的时候，往往会阻塞别的文件的加载，如样式文件的加载，DOM的解析等等，所以一般建议将<script>标签放到最后加载，从而提升页面的渲染速度

但是如果嫌麻烦，浏览器提供了两种方式方便解决这个问题，defer和async属性，下面是浏览器对两者的支持程度

主流浏览器对defer属性的支持程度 

主流浏览器对async属性的支持程度

除了IE需要注意，别的浏览器都能支持

两者的区别

defer属性和async属性都是让脚本文件异步加载，即加载过程不阻塞DOM渲染

• 前者defer是将加载和执行分离，在DOM整个onload之后再执行，同时defer还能按脚本的顺序执行
• 后者async是加载完就执行，不分顺序，且执行过程依旧会阻塞DOM渲染

所以defer往往被用在相互有牵连的脚本之间，而async被用于不相干脚本之间

在不确定是否会有相关联脚本的时候，应该优先采取defer属性

prefetch和preload

• pretch是提前加载页面未来可能使用的资源，且是在浏览器空闲状态下发出的加载请求

​​​​​​​<link rel="prefetch" href="http://.../a.js" />

• ​​​​​​​preload是异步加载当前页面所需的资源，且分离了加载和执行，不阻塞DOM的渲染，在onload之后进行执行
  • ​​​​​​​as属性:指定资源的类型，比如script，style等
  • crossorign属性:防止跨域请求的资源再次请求（二次请求）

​​​​​​​<link rel="preload" href="http://.../a.js" as="script" crossorign />