·您当前的位置:首页 > 技术教程 > Html5技术 >

[html5]API详解7:利用Link perfetch提升加载速度,优化体验

时间:2017-03-06 14:20web前端教程
浏览器会自动在后台把你需要加载的页面下载下来,当用户要点击进入该页面的时候,浏览器会从缓存把这个页面取出来,页面的加载速度就会加快。

链接预取:浏览器会自动在后台把你需要加载的页面下载下来,当用户要点击进入该页面的时候,浏览器会从缓存把这个页面取出来,页面的加载速度就会加快。

标签属性:rel=‘next’

页面预加载很简单,只需要加上:<link rel='next' href='xxx.html'>

要预加载静态资源的话也可以实现

<link rel="prefetch" href="/images/big.jpeg">

适用场景:

1.当你有一篇篇幅很长的文章,或在线教程,或图册等,需要分成多页显示时。

2.在你的网站首页预加载那些用户最可能访问的下一页。(可能是一个商品网站上“重点推荐”商品页面,或博客网站上最近的一篇博客)

3.搜索查询页面预加载搜索出来的前几条。

遗憾的是:目前只有火狐浏览器支持这个功能。但是因为火狐目前是世界上拥有第二大用户群的浏览器,所以只要你在HTML页面了加上这样的一句代码,仍有相当大的一部分访问者能体验到这十分明显的页面加载速度的提高。链接预取功能不久将会在Opera, Chrome 和 Safari 浏览器里实现,但对于Internet Explorer,你估计要等到2020年。

这个API操作起来比较简单,赶紧一试!

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器