![7275569-c916ff05e2a32c7b.jpg](https://i-blog.csdnimg.cn/blog_migrate/46cebc9849c096aeece1ca824f6361dc.webp?x-image-process=image/format,png)
页面资源预加载(Link prefetch)是浏览器提供的一个技巧,目的是让浏览器在空闲时间下载或预读取一些文档资源,用户在将来将会访问这些资源。一个Web页面可以对浏览器设置一系列的预加载指示,当浏览器加载完当前页面后,它会在后台静悄悄的加载指定的文档,并把它们存储在缓存里。当用户访问到这些预加载的文档后,浏览器能快速的从缓存里提取给用户。
以下代码是放在<head>标签里面的。
HTML代码:
<!-- 预加载整个页面 -->
<link rel="prefetch" href="http://www.baidu.com/" />
<!-- 预加载图片 -->
<link rel="prefetch" href="http://desk.fd.zol-img.com.cn/t_s1920x1080c5/g5/M00/06/07/ChMkJlo50b6IBlQLAAFGULqiVhcAAjUpgN-M7wAAUZo647.jpg?downfile=1513861639609.jpg" />
HTML5页面资源预加载/预读取(Link prefetch)功能是通过Link标记实现的,将rel属性指定为“prefetch”,在href属性里指定要加载资源的地址。火狐浏览器(Firefox)里还提供了一种额外的属性支持:
HTML代码:
<link rel="prefetch alternate stylesheet" title="Designed for Mozilla" href="mozspecific.css" />
<link rel="next" href="2.html" />
适用情况:
当页面有幻灯片类似的服务时,预加载/预读取接下来的1-3页和之前的1-3页。
预加载那些整个网站通用的图片。
预加载网站上搜索结果的下一页。
在页面里加载什么样的资源,什么时候加载,这完全取决于你期望给用户带来什么样的体验。以上三条只是建议。
禁止页面资源预加载
火狐浏览器(Firefox)里有一个选项可以禁止任何的页面资源预加载(Link prefetch)功能。
user_pref("network.prefetch-next", false);
注意事项:
预加载(Link prefetch)不能跨域工作,包括跨域Cookies。
预加载(Link prefetch)有可能导致网站访问量统计不准确,因为有些预加载到浏览器的页面用户可能并未真正访问。
虽然预加载(Link prefetch)还存在一定缺陷,但适当利用这个功能,在一定程度上能提升用户体验。
希望以上笔记对大家有帮助。
我的其他笔记在微信公众号:Rabbit_svip
![7275569-2c6784ee7e8bbfd9.png](https://i-blog.csdnimg.cn/blog_migrate/cb1217f9f654b74c4d60e9b2797fceda.webp?x-image-process=image/format,png)