HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)


Posted in HTML / CSS onMay 07, 2014

我曾经介绍过本站上使用的一些速度优化技术。而在HTML5里,出现了一个新的用来优化网站速度的新功能:页面资源预加载/预读取(Link prefetch)。

页面资源预加载/预读取(Link prefetch)是什么?来自MDN的解释:

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

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

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

复制代码
代码如下:

<!-- 预加载整个页面 -->
<link rel="prefetch" href="https://3water.com/misc/3d-album/" /></p> <p><!-- 预加载一个图片 -->
<link rel="prefetch" href=" <a href="https://3water.com/wordpress/">https://3water.com/wordpress/</a>
wp-content/uploads/2014/04/b-334x193.jpg " />

HTML5页面资源预加载/预读取(Link prefetch)功能是通过Link标记实现的,将rel属性指定为“prefetch”,在href属性里指定要加载资源的地址。火狐浏览器里还提供了一种额外的属性支持:
复制代码
代码如下:

<link rel="prefetch alternate stylesheet"
title="Designed for Mozilla" href="mozspecific.css" _fcksavedurl=""mozspecific.css"" />
<link rel="next" href="2.html" />

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

什么情况下应该预加载页面资源

在你的页面里加载什么样的资源,什么时候加载,这完全取决于你。下面是一些建议:

1.当页面有幻灯片类似的服务时,预加载/预读取接下来的1-3页和之前的1-3页。
2.预加载那些整个网站通用的图片。
3.预加载网站上搜索结果的下一页。

禁止页面资源预加载(Link prefetch)

火狐浏览器里有一个选项可以禁止任何的页面资源预加载(Link prefetch)功能,你可以这样设置:

1.user_pref("network.prefetch-next", false);
2.页面资源预加载(Link prefetch)注意事项

下面是一些关于页面资源预加载(Link prefetch)的注意事项:

1.预加载(Link prefetch)不能跨域工作,包括跨域拉取cookies。
2.预加载(Link prefetch)会污染你的网站访问量统计,因为有些预加载到浏览器的页面用户可能并未真正访问。
3.火狐浏览器从2003年开始就已经提供了对这项预加载(Link prefetch)技术的支持。

利用浏览器空闲时间加载一些额外的资源文件,看起来是既刺激又危险,你想试试这些技术吗?

HTML / CSS 相关文章推荐
CSS3属性使网站设计增强同时不消弱可用性
Aug 29 HTML / CSS
css图标制作教程制作云图标
Jan 19 HTML / CSS
HTML5边玩边学(2)基础绘图实现方法
Sep 21 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
Dec 30 HTML / CSS
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
Apr 14 HTML / CSS
详解html5 canvas常用api总结(二)--绘图API
Dec 14 HTML / CSS
HTML5+css3:3D旋转木马效果相册
Jan 03 HTML / CSS
canvas如何绘制钟表的方法
Dec 13 HTML / CSS
iframe跨域的几种常用方法
Nov 11 HTML / CSS
video实现有声音自动播放的实现方法
May 20 HTML / CSS
CSS 实现多彩、智能的阴影效果
May 12 HTML / CSS
详解CSS开发过程中的20个快速提升技巧
May 21 HTML / CSS
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
May 07 #HTML / CSS
html5 datalist标签使用示例(自动完成组件)
May 04 #HTML / CSS
HTML5 visibilityState属性详细介绍和使用实例
May 03 #HTML / CSS
HTML5中判断用户是否正在浏览页面的方法
May 03 #HTML / CSS
在HTML5 Canvas中放入图片和保存为图片的方法
May 03 #HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
May 03 #HTML / CSS
一个不错的HTML5 Canvas多层点击事件监听实例
Apr 29 #HTML / CSS
You might like
解析php中如何调用用户自定义函数
2013/08/06 PHP
PHP下通过QRCode类库创建中间带网站LOGO的二维码
2014/07/12 PHP
Laravel中扩展Memcached缓存驱动实现使用阿里云OCS缓存
2015/02/10 PHP
浅析PHP中Session可能会引起并发问题
2015/07/23 PHP
php数组函数array_key_exists()小结
2015/12/10 PHP
php查询操作实现投票功能
2016/05/09 PHP
php 实现Hash表功能实例详解
2016/11/29 PHP
W3C Group的JavaScript1.8 新特性介绍
2009/05/19 Javascript
jquery+json实现的搜索加分页效果
2010/03/31 Javascript
来自国外的页面JavaScript文件优化
2010/12/08 Javascript
js实现快速分享功能(你的文章分享工具)
2013/06/25 Javascript
javascript中定义私有方法说明(private method)
2014/01/27 Javascript
jQuery提示效果代码分享
2014/11/20 Javascript
在javascript中创建对象的各种模式解析
2016/05/16 Javascript
jQueryUI中的datepicker使用方法详解
2016/05/25 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
2016/06/21 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
2017/04/13 Javascript
Angularjs上传图片实例详解
2017/08/06 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
2018/08/06 Javascript
AngularJS 多指令Scope问题的解决
2018/10/25 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
2018/12/30 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
2019/04/14 Javascript
[04:49]2014DOTA2国际邀请赛 Newbee顺利挺进总决赛 ImbaTV独家专访
2014/07/19 DOTA
浅谈django开发者模式中的autoreload是如何实现的
2017/08/18 Python
Python之Scrapy爬虫框架安装及简单使用详解
2017/12/22 Python
python利用微信公众号实现报警功能
2018/06/10 Python
Python Pandas分组聚合的实现方法
2019/07/02 Python
python中的 zip函数详解及用法举例
2020/02/16 Python
学习Python列表的基础知识汇总
2020/03/10 Python
python按顺序重命名文件并分类转移到各个文件夹中的实现代码
2020/07/21 Python
python 常用日期处理-- datetime 模块的使用
2020/09/02 Python
ffmpeg+Python实现B站MP4格式音频与视频的合并示例代码
2020/10/21 Python
瑞典最好的运动鞋专卖店:Sneakersnstuff
2016/08/29 全球购物
四风问题个人自查剖析材料思想汇报
2014/09/21 职场文书
离婚承诺书格式范文
2015/05/04 职场文书
Golang 字符串的常见操作
2022/04/19 Golang