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绘制百度的小度熊
Oct 29 HTML / CSS
CSS中越界问题的经典解决方案【推荐】
Apr 19 HTML / CSS
CSS3实现瀑布流布局与无限加载图片相册的实例代码
Dec 22 HTML / CSS
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
Jun 01 HTML / CSS
css3实现简单的白云飘动背景特效
Oct 28 HTML / CSS
浅谈HTML5 defer和async的区别
Jun 07 HTML / CSS
html5使用canvas实现图片下载功能的示例代码
Aug 26 HTML / CSS
webapp字号大小跟随系统字号大小缩放的示例代码
Dec 26 HTML / CSS
html5/css3响应式页面开发总结
Oct 16 HTML / CSS
详解HTML5中的Communication API基本使用方法
Jan 29 HTML / CSS
HTML5 图片预加载的示例代码
Mar 25 HTML / CSS
HTML里显示pdf、word、xls、ppt的方法示例
Apr 14 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
第四节 构造函数和析构函数 [4]
2006/10/09 PHP
PHP 内存缓存加速功能memcached安装与用法
2009/09/03 PHP
利用PHP扩展vld查看PHP opcode操作步骤
2013/03/04 PHP
php生成RSS订阅的方法
2015/02/13 PHP
利用php操作memcache缓存的基础方法示例
2017/08/02 PHP
jquery ui dialog里调用datepicker的问题
2009/08/06 Javascript
jQuery Validation实例代码 让验证变得如此容易
2010/10/18 Javascript
extjs中form与grid交互数据(record)的方法
2013/08/29 Javascript
javascript中String对象的slice()方法分析
2014/12/20 Javascript
JavaScript中number转换成string介绍
2014/12/31 Javascript
jQuery中prependTo()方法用法实例
2015/01/08 Javascript
JavaScript创建一个object对象并操作对象属性的用法
2015/03/23 Javascript
简单介绍JavaScript的变量和数据类型
2015/06/03 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
2016/05/17 Javascript
有关JavaScript中call()和apply() 的一些理解
2016/05/20 Javascript
JS 调用微信扫一扫功能
2016/12/22 Javascript
Vue2.0 实现单选互斥的方法
2018/04/13 Javascript
JavaScript中this关键字用法实例分析
2018/08/24 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
2018/09/28 Javascript
详解jQuery中的getAll()和cleanData()
2019/04/15 jQuery
js getBoundingClientRect使用方法详解
2019/07/17 Javascript
[01:14]英雄,所敬略同——2018完美盛典宣传视频
2018/12/05 DOTA
python学习之编写查询ip程序
2016/02/27 Python
利用ctypes提高Python的执行速度
2016/09/09 Python
python 捕获 shell/bash 脚本的输出结果实例
2017/01/04 Python
Python与人工神经网络:使用神经网络识别手写图像介绍
2017/12/19 Python
用OpenCV将视频分解成单帧图片,图片合成视频示例
2019/12/10 Python
pycharm解决关闭flask后依旧可以访问服务的问题
2020/04/03 Python
如何教少儿学习Python编程
2020/07/10 Python
10张动图学会python循环与递归问题
2021/02/06 Python
英国天然保健品网站:Simply Supplements
2017/03/22 全球购物
前厅部经理岗位职责范文
2014/02/04 职场文书
研究生求职自荐书
2014/06/23 职场文书
街道务虚会发言材料
2014/10/20 职场文书
2015年爱国卫生月活动总结
2015/03/26 职场文书
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js