标签中 dns-prefetch、prefetch、preload、defer、async 的区别

1、dns-prefetch

域名转化为 ip 是一个比较耗时的过程，dns-prefetch 能让浏览器空闲的时候帮你做这件事。尤其大型网站会使用多域名，这时候更加需要 dns 预取。

<link rel="dns-prefetch" href="//m.baidu.com">
复制代码

2、prefetch

prefetch 一般用来预加载可能使用的资源，一般是对用户行为的一种判断，浏览器会在空闲的时候加载 prefetch 的资源。

<link rel="prefetch" href="http://www.baidu.com/">
复制代码

3、preload

和 prefetch 不同，prefecth 通常是加载接下来可能用到的页面资源，而 preload 是加载当前页面要用的脚本、样式、字体、图片等资源。所以 preload 不是空闲时加载，它的优先级更强，并且会占用 http 请求数量。

<link rel='preload' href='style.css' as="style" onload="console.log('style loaded')"
复制代码

as 值包括

• script
• style
• image
• media
• document onload 方法是资源加载完成的回调函数

4、defer 和 async

//defer
<script defer src="script.js"></script>
//async
<script async src="script.js"></script>
复制代码

defer 和 async 都是异步(并行)加载资源，不同点是 async 是加载完立即执行，而 defer 是加载完不执行，等到所有元素解析完再执行，也就是 DOMContentLoaded 事件触发之前。
因为 async 加载的资源是加载完执行，所以它比不能保证顺序，而 defer 会按顺序执行脚本。