欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > html5案例分享 >

HTML5 预加载让页面得以快速泛起

发布时间:2016-11-24  编辑:杨雨个人博客网站   点击:   

赏识器厂商和开拓者之间配合全力的一个偏向就是让网站更快。此刻已有许多广为人知的加快办理方案: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)
你怎么以为呢?行使空闲时刻下载特另外文件属于一种激进的优化 本文地址:http://itbyc.com/web/html5/13070.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1