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 相关文章推荐
纯DOM+CSS3实现简单的小风车动画
Sep 27 HTML / CSS
css3实现背景动态渐变效果
Dec 10 HTML / CSS
web页面录屏实现
Feb 12 HTML / CSS
HTML5 CSS3新的WEB标准和浏览器支持
Jul 16 HTML / CSS
html5 canvas实现圆形时钟代码分享
Dec 25 HTML / CSS
html5菜单折纸效果
Apr 22 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
Jun 16 HTML / CSS
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
Jul 31 HTML / CSS
canvas简单连线动画的实现代码
Feb 04 HTML / CSS
AmazeUI 模态窗口的实现代码
Aug 18 HTML / CSS
CSS3鼠标悬浮过渡缩放效果
Apr 17 HTML / CSS
CSS的calc函数用法小结
Jun 25 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/11/26 PHP
PHP中使用TCPDF生成PDF文档实例
2014/07/01 PHP
php数字每三位加逗号的功能函数
2015/10/22 PHP
WordPress网站性能优化指南
2015/11/18 PHP
PHP实现的回溯算法示例
2017/08/15 PHP
PHP面向对象之里氏替换原则简单示例
2018/04/08 PHP
javascript 打开页面window.location和window.open的区别
2010/03/17 Javascript
jQuery 遍历json数组的实现代码
2020/09/22 Javascript
jquery 页面全选框实践代码
2010/04/02 Javascript
关于Jquery操作Cookie取值错误的解决方法
2013/08/26 Javascript
js特殊字符过滤的示例代码
2014/03/05 Javascript
深入分析js的冒泡事件
2014/12/05 Javascript
jquery右下角自动弹出可关闭的广告层
2015/05/08 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
2015/05/11 Javascript
jQuery中 bind的用法简单介绍
2017/02/13 Javascript
详解Nuxt.js Vue服务端渲染摸索
2018/02/08 Javascript
jQuery实现判断上传图片类型和大小的方法示例
2018/04/11 jQuery
vue 解决异步数据更新问题
2019/10/29 Javascript
jQuery编写QQ简易聊天框
2020/08/27 jQuery
[05:01]3.19DOTA2发布会 我们都是刀塔人
2014/03/25 DOTA
windows下安装python paramiko模块的代码
2013/02/10 Python
Python延时操作实现方法示例
2018/08/14 Python
python在html中插入简单的代码并加上时间戳的方法
2018/10/16 Python
Python字符串逆序的实现方法【一题多解】
2019/02/18 Python
Python Opencv中用compareHist函数进行直方图比较对比图片
2020/04/07 Python
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
创业计划书——互联网商机
2014/01/12 职场文书
大学英语演讲稿(中英文对照)
2014/01/14 职场文书
《寓言两则》教学反思
2014/02/27 职场文书
员工团队活动方案
2014/08/28 职场文书
护士长2014年终工作总结
2014/11/11 职场文书
党员进社区活动总结
2015/05/07 职场文书
毕业论文答辩开场白
2015/05/27 职场文书
住房公积金贷款工资证明
2015/06/12 职场文书
Python虚拟环境virtualenv是如何使用的
2021/06/20 Python
JS实现刷新网页后之前浏览位置保持不变示例详解
2022/08/14 Javascript