link 标签和 script 标签中 dns-prefetch、prefetch、preload、defer、async 字段有什么区别?

1,385 阅读1分钟

标签中 dns-prefetchprefetchpreloaddeferasync 的区别

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、deferasync

//defer
<script defer src="script.js"></script>
//async
<script async src="script.js"></script>

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