HTML5 预加载让页面得以快速呈现


Posted in HTML / CSS onAugust 13, 2013

浏览器厂商和开发者之间共同努力的一个方向就是让网站更快。现在已有很多广为人知的加速解决方案:CSS sprites(CSS精灵,拼图)以及图像优化,分布式配置文件(.htaccess),JS/文本文件压缩,CDN加速等。

我在另一篇博文中介绍了 如何让网站更快。
FireFox推介一种新的网站加速策略: 链接预加载。什么是链接预加载?MDN描述如下:

预加载是一种浏览器机制,使用浏览器空闲时间来预先下载/加载用户接下来很可能会浏览的页面/资源。页面提供给浏览器需要预加载的集合。浏览器载入当前页面完成后,将会在后台下载需要预加载的页面并添加到缓存中。当用户访问某个预加载的链接时,如果从缓存命中,页面就得以快速呈现。

简单概述:网站根据用户分析,让浏览器后台下载指定页面/文档/图片,实现起来超easy:

HTML5预加载标签

复制代码
代码如下:

<!-- 页面,可以使用绝对或者相对路径 -->
<link rel="prefetch" href="page2.html" />
<!-- 图片,也可以是其他类型的文件 -->
<link rel="prefetch" href="sprite.png" />

从上面的HTML代码可以看出,预加载使用 <link> 标签,并指定 rel="prefetch" 属性,而href属性就是需要预加载的文件路径。而Mozilla还实现了一些类似的 link rel 属性:

复制代码
代码如下:

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

备注: https 协议也同样支持。

何时需要预加载
网站是否采用预加载取决于你的需求,下面是一些建议:
- 如果一系列的页面幻灯片一样展示,那么可以预加载前后各1至3个页面.
- 加载网站内部通用的图片
- 在搜索结果页预加载下一页

阻止预加载
Firefox 允许禁止预加载模式,代码如下:

复制代码
代码如下:

user_pref("network.prefetch-next", false);

注意事项
关于链接预加载,有如下注意事项:
- 预加载可以跨域进行,当然,请求时cookie等信息也会被发送。
- 预加载可能破坏网站统计数据,而用户并没有实际访问。
- Mozilla Firefox 是目前唯一支持预加载模式的浏览器,(2003-2010)
你怎么认为呢?使用空闲时间下载额外的文件属于一种激进的优化
HTML / CSS 相关文章推荐
css3中的calc函数浅析
Jul 10 HTML / CSS
用CSS3将你的设计带入下个高度
Aug 08 HTML / CSS
10个很棒的 CSS3 开发工具 推荐
May 16 HTML / CSS
css3闪亮进度条效果实现思路及代码
Apr 17 HTML / CSS
css3 position fixed固定居中问题解决方案
Aug 19 HTML / CSS
CSS3 中的@keyframes介绍
Sep 02 HTML / CSS
css3使用animation属性实现炫酷效果(推荐)
Feb 04 HTML / CSS
CSS3 真的会替代 SCSS 吗
Mar 09 HTML / CSS
HTML5标签大全
Nov 23 HTML / CSS
localStorage、sessionStorage使用总结
Nov 17 HTML / CSS
浅谈移动端网页图片预加载方案
Nov 05 HTML / CSS
HTML5超文本标记语言的实现方法
Sep 24 HTML / CSS
HTML5的语法变化介绍
Aug 13 #HTML / CSS
Canvas与Image互相转换示例代码
Aug 09 #HTML / CSS
通过Canvas及File API缩放并上传图片完整示例
Aug 08 #HTML / CSS
HTML5新增的Css选择器、伪类介绍
Aug 07 #HTML / CSS
HTML5 自动聚焦(autofocus)属性使用介绍
Aug 07 #HTML / CSS
HTML5 placeholder(空白提示)属性介绍
Aug 07 #HTML / CSS
5个你不知道的HTML5的接口介绍
Aug 07 #HTML / CSS
You might like
php数据库备份还原类分享
2014/03/20 PHP
php页码形式分页函数支持静态化地址及ajax分页
2014/03/28 PHP
Zend Framework过滤器Zend_Filter用法详解
2016/12/09 PHP
从sohu弄下来的flash中展示图片的代码
2007/04/27 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
2013/11/25 Javascript
jquery简单实现滚动条下拉DIV固定在头部不动
2013/11/25 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
2014/12/05 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
2015/08/11 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
2015/12/31 Javascript
jQuery完成表单验证的实例代码(纯代码)
2017/09/30 jQuery
node.js中fs文件系统目录操作与文件信息操作
2018/02/24 Javascript
使用D3.js构建实时图形的示例代码
2018/08/28 Javascript
微信小程序实现简单表格
2019/02/14 Javascript
jQuery中each和js中forEach的区别分析
2019/02/27 jQuery
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
2019/06/12 Javascript
Vue的生命周期操作示例
2019/09/17 Javascript
[01:52]PWL S2开团时刻第四期——DOTA2成语故事
2020/12/03 DOTA
python使用cookielib库示例分享
2014/03/03 Python
python实现得到一个给定类的虚函数
2014/09/28 Python
Java实现的执行python脚本工具类示例【使用jython.jar】
2018/03/29 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
Python基于Tkinter模块实现的弹球小游戏
2018/12/27 Python
利用Python绘制有趣的万圣节南瓜怪效果
2019/10/31 Python
Python排序函数的使用方法详解
2020/12/11 Python
美国首屈一指的高品质珠宝设计师和零售商:Allurez
2018/01/23 全球购物
日本整理专家Marie Kondo的官方在线商店:KonMari
2020/06/29 全球购物
岗位职责定义及内容
2013/11/08 职场文书
积极向上的团队口号
2014/06/06 职场文书
分公司总经理岗位职责
2014/08/03 职场文书
2015年元旦演讲稿
2014/09/12 职场文书
师范生见习报告范文
2014/11/03 职场文书
嘉宾邀请函
2015/01/31 职场文书
教师辞职信范文
2015/02/28 职场文书
推广普通话的宣传语
2015/07/13 职场文书
Nginx配置80端口访问8080及项目名地址方法解析
2021/03/31 Servers