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无js实现的Android Logo(有简单动画)
Jan 21 HTML / CSS
详解CSS3阴影 box-shadow的使用和技巧总结
Dec 03 HTML / CSS
用React加CSS3实现微信拆红包动画效果
Mar 13 HTML / CSS
CSS3制作酷炫的条纹背景
Nov 09 HTML / CSS
html5 学习简单的拾色器
Sep 03 HTML / CSS
HTML5 video播放器全屏(fullScreen)方法实例
Apr 24 HTML / CSS
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
Feb 28 HTML / CSS
HTML5中indexedDB 数据库的使用实例
May 11 HTML / CSS
video实现有声音自动播放的实现方法
May 20 HTML / CSS
HTML5 canvas实现的静态循环滚动播放弹幕
Jan 05 HTML / CSS
CSS极坐标的实例代码
Jun 03 HTML / CSS
前端使用svg图片改色实现示例
Jul 23 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/09/25 PHP
Yii扩展组件编写方法实例分析
2015/06/29 PHP
配置Nginx+PHP的正确思路与过程
2016/05/10 PHP
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
2011/11/30 Javascript
利用jQuery实现可以编辑的表格
2014/05/26 Javascript
技术男用来对妹子表白的百度首页
2014/07/23 Javascript
使用js复制链接中的部分文字的方法
2015/07/30 Javascript
JavaScript 七大技巧(二)
2015/12/13 Javascript
输入框点击时边框变色效果的实现方法
2016/12/26 Javascript
jQuery动画_动力节点节点Java学院整理
2017/07/04 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
2017/10/13 jQuery
vue axios基于常见业务场景的二次封装的实现
2018/09/21 Javascript
使用p5.js实现动态GIF图片临摹重现
2019/10/23 Javascript
jquery+ajax实现异步上传文件显示进度条
2020/08/17 jQuery
Vue实现简单的拖拽效果
2020/08/25 Javascript
[52:09]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第二场
2014/05/26 DOTA
Python中zip()函数用法实例教程
2014/07/31 Python
Python列表解析操作实例总结
2020/02/26 Python
keras的三种模型实现与区别说明
2020/07/03 Python
微信小程序实现可实时改变转速的css3旋转动画实例代码
2018/09/11 HTML / CSS
IE浏览器单独写CSS样式的几种方法
2014/10/14 HTML / CSS
CSS实现聊天气泡效果
2020/04/26 HTML / CSS
Smallable意大利家庭概念店:设计师童装及家居装饰
2018/01/08 全球购物
研发工程师的岗位职责
2013/11/18 职场文书
演讲稿怎么写才完美
2014/01/02 职场文书
社团文化节邀请函
2014/01/10 职场文书
公司活动邀请函
2014/01/24 职场文书
班主任评语大全
2014/04/26 职场文书
消防宣传口号
2014/06/16 职场文书
大学毕业典礼演讲稿
2014/09/09 职场文书
2015年学校精神文明工作总结
2015/05/27 职场文书
在 Golang 中实现 Cache::remember 方法详解
2021/03/30 Python
ORACLE查看当前账号的相关信息
2021/06/18 Oracle
Spring Boot 实现敏感词及特殊字符过滤处理
2021/06/29 Java/Android
JavaScript实现简单拖拽效果
2021/09/15 Javascript
MySQL 数据表操作
2022/05/04 MySQL