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实现垂直下拉动画菜单示例
Apr 22 HTML / CSS
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
Mar 14 HTML / CSS
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
Nov 30 HTML / CSS
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
Jan 08 HTML / CSS
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
Jun 03 HTML / CSS
html5的新玩法——语音搜索
Jan 03 HTML / CSS
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
Jul 15 HTML / CSS
HTML5 video 视频标签使用介绍
Feb 03 HTML / CSS
html5+css3进度条倒计时动画特效代码【推荐】
Mar 08 HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
Dec 27 HTML / CSS
HTML5中的Web Notification桌面通知功能的实现方法
Jul 29 HTML / CSS
HTML5之高度塌陷问题的解决
Jun 01 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
使用 MySQL 开始 PHP 会话
2006/12/21 PHP
php绘图中显示不出图片的原因及解决
2014/03/05 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
学习javascript,实现插入排序实现代码
2011/07/31 Javascript
javascript实现显示和隐藏div方法汇总
2015/08/14 Javascript
详解JavaScript UTC时间转换方法
2016/01/07 Javascript
AngularJS基础 ng-selected 指令简单示例
2016/08/03 Javascript
使用JS代码实现点击按钮下载文件
2016/11/12 Javascript
解析如何利用iframe标签以及js制作时钟
2016/12/08 Javascript
使用jquery给新生的th绑定hover事件的实例
2017/02/10 Javascript
angularjs点击图片放大实现上传图片预览
2017/02/24 Javascript
javascript中mouseenter与mouseover的异同
2017/06/06 Javascript
值得收藏的vuejs安装教程
2017/11/21 Javascript
VueJs使用Amaze ui调整列表和内容页面
2017/11/30 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
2018/01/21 Javascript
微信小程序自定义键盘 内部虚拟支付
2018/12/20 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
2019/03/04 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
2019/04/25 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
2019/09/02 Javascript
JavaScript实现PC端横向轮播图
2020/02/07 Javascript
vue中实现图片压缩 file文件的方法
2020/05/28 Javascript
python双向链表实现实例代码
2013/11/21 Python
django rest framework之请求与响应(详解)
2017/11/06 Python
简单实现python聊天程序
2018/04/01 Python
解决python便携版无法直接运行py文件的问题
2020/09/01 Python
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
2016/02/27 HTML / CSS
英国家电购物网站:Sonic Direct
2019/03/26 全球购物
电子信息工程专业求职信
2014/06/28 职场文书
小学生感恩父母演讲稿
2014/08/28 职场文书
2015年度优秀员工自荐书
2015/03/06 职场文书
党员个人承诺书
2015/04/27 职场文书
费用申请报告范文
2015/05/15 职场文书
总结Python常用的魔法方法
2021/05/25 Python
Python+Selenium自动化环境搭建与操作基础详解
2022/03/13 Python
Go并发4种方法简明讲解
2022/04/06 Golang