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

干了这碗小姨妈

干了这碗小姨妈

2016-02-19 10:18

今天图老师小编给大家介绍下HTML5 预加载让页面得以快速呈现,平时喜欢HTML5 预加载让页面得以快速呈现的朋友赶紧收藏起来吧!记得点赞哦~
浏览器厂商和开发者之间共同努力的一个方向就是让网站更快。现在已有很多广为人知的加速解决方案: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" href="mozspecific.css" /
link rel="next" href="2.html" /

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

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

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

代码如下:

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

注意事项
关于链接预加载,有如下注意事项:
- 预加载可以跨域进行,当然,请求时cookie等信息也会被发送。
- 预加载可能破坏网站统计数据,而用户并没有实际访问。
- Mozilla Firefox 是目前唯一支持预加载模式的浏览器,(2003-2010)
你怎么认为呢?使用空闲时间下载额外的文件属于一种激进的优化
展开更多 50%)
分享

猜你喜欢

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

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

android WebView加载html5介绍

编程语言 网络编程
android WebView加载html5介绍

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

html5 标签

Web开发
html5 标签

让IE支持HTML5的方法

Web开发
让IE支持HTML5的方法

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

让JavaScript拯救HTML5的离线存储

Web开发
让JavaScript拯救HTML5的离线存储

HTML5 实战PHP之Web页面表单设计

Web开发
HTML5 实战PHP之Web页面表单设计

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

html5 的a标签 Href 拨电话的写法

html5 的a标签 Href 拨电话的写法

一站到底游戏电脑版详细安装方法

一站到底游戏电脑版详细安装方法
下拉加载更多内容 ↓