HTML5 API详解（7）:link prefetch提升加载速度，优化体验

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

标签属性：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操作起来比较简单，赶紧一试！

HTML5 API详解（7）:link prefetch提升加载速度，优化体验相关推荐

vue 加载页面时触发时间_详解Vue.js在页面加载时执行某个方法
详解Vue.js在页面加载时执行某个方法 jQuery中可以这样写 vue中,如果要达到相同效果,可以使用vue的生命周期函数,如create或者mounted 附上vue.js的生命周期函数执行流程 ...
前端性能优化（一）提升加载速度
加入QQ群:864680898,一起学习进步!点击群名可查看本人网站,有最新文章! 前端性能优化----(一)提升加载速度由于现在大部分是做的单页面应用了,那么会导致页面的首次加载时间非常的长.常见 ...
vue首屏加载速度慢_Vue首屏加载速度优化如何提升80%？本文详解
在Vue项目中,引入到工程中的所有js.css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏.若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首屏 ...
web 页面加载速度优化实战-100% 的飞跃提升
前言一个网站的加载速度有多重要? 反正我相信之前来博主网站的人至少有 50% 在加载完成前关闭了本站. 为啥捏? 看图首页完整加载时间 8.18s,看来能进来看博主网站的人都是真爱呀,哈哈. ...
白话科普系列——网站靠什么提升加载速度？
随着生活节奏的不断加快,时间变得极其宝贵,等待页面加载的时间也随之缩短.这样一来如何留住客户变成了一项重要的考验.而减少页面加载等待时间,加快加载速度,就成了提高用户参与度S,提升业务可靠性的有效策略 ...
Vue首屏加载速度优化，提升80%以上
在Vue项目中,引入到工程中的所有js.css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏.若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首屏 ...
Vue首屏加载速度优化，我用这几个技巧提升80%以上
作者:谁动了我的橘子原文链接:https://juejin.im/post/5edf5b22e51d4578975a7024 在Vue项目中,引入到工程中的所有js.css文件,编译时都会被打包进v ...
vue 关闭窗口后清除所有数据_Vue首屏加载速度优化，我用这几个技巧提升80%以上...
前端潮咖点击上面蓝字,关注我们! 关注关注前端潮咖,每日精选好文作者:谁动了我的橘子来源:https://juejin.im/post/5edf5b22e51d4578975a7024 在Vu ...
cocoscreator开发h5游戏提升加载速度
有个cocoscreator开发的游戏项目需要导出h5端.开发完毕,导出web-mobile端,然后部署到nginx容器里,问题来了,加载速度有点慢. 解决这个问题的直接方式,就是直接把游戏包放在cd ...

HTML5 API详解（7）:link prefetch提升加载速度，优化体验

HTML5 API详解（7）:link prefetch提升加载速度，优化体验相关推荐

最新文章

热门文章