微学网

热门关键词:   as  thinkphp  ecshop  商务通  xxx  www.ymwears.cn
热门: ASP.NET PHP编程 ASP编程 JSP编程 Python

HTML5资源预加载(Link prefetch)详细介绍(给你的网页

发布时间:2017-05-13 来源:未知 点击:
点评:不管是浏览器的开发者还是普通web应用的开发者,他们都在做一个共同的努力:让Web浏览有更快的速度感觉。有很多已知的技术都可以让你的网站速度变得更快:使用CSS sprites,使用图片优化工具,使用.htaccess设置页面头信息和缓存时间,JavaScript压缩,使用CDN等

我曾经介绍过本站上使用的一些速度优化技术。而在HTML5里,出现了一个新的用来优化网站速度的新功能:页面资源预加载/预读取(Link prefetch)。WyiHTML5中文学习网 - HTML5先行者学习网

页面资源预加载/预读取(Link prefetch)是什么?来自MDN的解释:WyiHTML5中文学习网 - HTML5先行者学习网

页面资源预加载(Link prefetch)是浏览器提供的一个技巧,目的是让浏览器在空闲时间下载或预读取一些文档资源,用户在将来将会访问这些资源。一个Web页面可以对浏览器设置一系列的预加载指示,当浏览器加载完当前页面后,它会在后台静悄悄的加载指定的文档,并把它们存储在缓存里。当用户访问到这些预加载的文档后,浏览器能快速的从缓存里提取给用户。WyiHTML5中文学习网 - HTML5先行者学习网

简单说来就是:让浏览器预先加载用户访问当前页后极有可能访问的其他资源(页面,图片,视频等)。而且方法超级的简单!WyiHTML5中文学习网 - HTML5先行者学习网

HTML5页面资源预加载(Link prefetch)写法WyiHTML5中文学习网 - HTML5先行者学习网

代码如下:WyiHTML5中文学习网 - HTML5先行者学习网
<!-- 预加载整个页面 -->WyiHTML5中文学习网 - HTML5先行者学习网
<link rel="prefetch" href="http://www./misc/3d-album/" /></p><p><!-- 预加载一个图片 -->WyiHTML5中文学习网 - HTML5先行者学习网
<link rel="prefetch" href=" <a href="http://www./wordpress/">http://www./wordpress/</a>WyiHTML5中文学习网 - HTML5先行者学习网
wp-content/uploads/2014/04/b-334x193.jpg " />WyiHTML5中文学习网 - HTML5先行者学习网
HTML5页面资源预加载/预读取(Link prefetch)功能是通过Link标记实现的,将rel属性指定为“prefetch”,在href属性里指定要加载资源的地址。火狐浏览器里还提供了一种额外的属性支持:WyiHTML5中文学习网 - HTML5先行者学习网

代码如下:WyiHTML5中文学习网 - HTML5先行者学习网
<link rel="prefetch alternate stylesheet" WyiHTML5中文学习网 - HTML5先行者学习网
title="Designed for Mozilla" href="mozspecific.css" _fcksavedurl=""mozspecific.css"" />WyiHTML5中文学习网 - HTML5先行者学习网
<link rel="next" href="2.html" />WyiHTML5中文学习网 - HTML5先行者学习网
HTTPS协议资源下也可以使用prefetch。WyiHTML5中文学习网 - HTML5先行者学习网

WyiHTML5中文学习网 - HTML5先行者学习网
什么情况下应该预加载页面资源WyiHTML5中文学习网 - HTML5先行者学习网

在你的页面里加载什么样的资源,什么时候加载,这完全取决于你。下面是一些建议:WyiHTML5中文学习网 - HTML5先行者学习网

1.当页面有幻灯片类似的服务时,预加载/预读取接下来的1-3页和之前的1-3页。WyiHTML5中文学习网 - HTML5先行者学习网
2.预加载那些整个网站通用的图片。WyiHTML5中文学习网 - HTML5先行者学习网
3.预加载网站上搜索结果的下一页。WyiHTML5中文学习网 - HTML5先行者学习网

禁止页面资源预加载(Link prefetch)WyiHTML5中文学习网 - HTML5先行者学习网

火狐浏览器里有一个选项可以禁止任何的页面资源预加载(Link prefetch)功能,你可以这样设置:WyiHTML5中文学习网 - HTML5先行者学习网

1.user_pref("network.prefetch-next", false);WyiHTML5中文学习网 - HTML5先行者学习网
2.页面资源预加载(Link prefetch)注意事项WyiHTML5中文学习网 - HTML5先行者学习网

下面是一些关于页面资源预加载(Link prefetch)的注意事项:WyiHTML5中文学习网 - HTML5先行者学习网

1.预加载(Link prefetch)不能跨域工作,包括跨域拉取cookies。WyiHTML5中文学习网 - HTML5先行者学习网
2.预加载(Link prefetch)会污染你的网站访问量统计,因为有些预加载到浏览器的页面用户可能并未真正访问。WyiHTML5中文学习网 - HTML5先行者学习网
3.火狐浏览器从2003年开始就已经提供了对这项预加载(Link prefetch)技术的支持。WyiHTML5中文学习网 - HTML5先行者学习网

利用浏览器空闲时间加载一些额外的资源文件,看起来是既刺激又危险,你想试试这些技术吗?WyiHTML5中文学习网 - HTML5先行者学习网

WyiHTML5中文学习网 - HTML5先行者学习网

这就是微学网-程序员之家为你提供的"HTML5资源预加载(Link prefetch)详细介绍(给你的网页"希望对你有所帮助.本文来自网络,转载请注明出处:http://www.weixuecn.cn/article/6767.html
网络编程 | 前端制作 | 数据库 | CMS教程 | 脚本编程 | 框架 | 服务器 | 微信开发 | APP开发 |

凡本网站转载的文章、图片等资料的版权归版权所有人所有,因无法和版权所有者一一联系,如果本网站选取的文/图威胁到您的权益,请您及时和本网站联系。 我们会在第一时间内采取措施,避免给双方造 成不必要的损失。
© 2015-2018 微学网 版权所有,并保留所有权利。 备案号:粤ICP备09051474号-1

菜鸟教程,提供各类程序编程入门,技巧