页面资源预加载(Link prefetch)功能加速你的页面加载速度

时间:2022-01-15 04:07:24

有了浏览器缓存,为何还需要预加载?

  • 用户可能是第一次访问网站,此时还无缓存
  • 用户可能清空了缓存
  • 缓存可能已经过期,资源将重新加载
  • 用户访问的缓存文件可能不是最新的,需要重新加载

页面资源预加载/预读取(Link prefetch)是什么?

页面资源预加载(Link prefetch)是浏览器提供的一个技巧,目的是让浏览器在空闲时间下载或预读取一些文档资源,用户在将来将会访问这些资源。一个Web页面可以对浏览器设置一系列的预加载指示,当浏览器加载完当前页面后,它会在后台静悄悄的加载指定的文档,并把它们存储在缓存里。当用户访问到这些预加载的文档后,浏览器能快速的从缓存里提取给用户。

简单说来就是:让浏览器预先加载用户访问当前页后极有可能访问的其他资源(页面,图片,视频等)。而且方法超级的简单!

HTML5页面资源预加载(Link prefetch)写法

在 Chrome 下,我们可以用 link标签声明特定文件的预加载:

<link rel='subresource' href='critical.js'>
<link rel='subresource' href='main.css'>
<link rel='prefetch' href='secondary.js'>

在 Firefox 中或用 meta 标签声明:

<meta http-equiv="Link" content="<critical.js>; rel=prefetch">

rel='subresource' 表示当前页面必须加载的资源,应该放到页面最顶端先加载,有最高的优先级。

rel='prefetch' 表示当 subresource 所有资源都加载完后,开始预加载这里指定的资源,有最低的优先级。

PS:只有可缓存的资源才进行预加载,否则浪费资源!

HTTPS协议资源下也可以使用prefetch。

DNS预获取(dns-prefetch)

<meta http-equiv='x-dns-prefetch-control' content='on'>
<link rel='dns-prefetch' href='http://g-ecx.images-amazon.com'>
<link rel='dns-prefetch' href='http://z-ecx.images-amazon.com'>
<link rel='dns-prefetch' href='http://ecx.images-amazon.com'>
<link rel='dns-prefetch' href='http://completion.amazon.com'>
<link rel='dns-prefetch' href='http://fls-na.amazon.com'>

应用场景1:我们的资源存在在不同的 CDN 中,那提前声明好这些资源的域名,就可以节省请求发生时产生的域名解析的时间。
应用场景2:如果我们知道用户接下来的操作一定会发起一起资源的请求,那就可以将这个资源进行 DNS-Prefetch,加强用户体验。

Pre render

前面说到的预解析DNS、预加载资源已经够强悍了有木有,可还有更厉害的预渲染(Pre-rendering)!

预渲染意味着我们提前加载好用户即将访问的下一个页面,否则进行预渲染这个页面将浪费资源,慎用!

<link rel='prerender' href='http://www.pagetoprerender.com'>

rel='prerender' 表示浏览器会帮我们渲染但隐藏指定的页面,一旦我们访问这个页面,则秒开了!

在 Firefox 中或用 rel='next' 来声明

<link rel="next" href="http://www.pagetoprerender.com">