小编给大家分享一下HTML5中使用rel属性预加载功能的方法,希望大家阅读完这篇文章后大所收获、下面让我们一起去探讨吧!
在HTML5中,有个很有用但常被忽略的特性,就是预先加载(预取),它的原理是:
利用浏览器的空闲时间去先下载用户指定需要的内容,然后缓存起来,这样用户下次加载时,就直接从缓存中取出来,效率就快了。
举个例子说明:比如要预先加载某个页面,可以这样:
但如果是谷歌的话,要用另外的一个名称,即:
即使在不支持的浏览器,用了这个特性其实是不会出错的,只不过浏览器解析不到而已,所以,如果你感觉能有办法预先预测到用户期望点的页面(比如用户看最新的受欢迎的热图,他可能看了第一页后,会继续看下一页,这个时候就可以用预先加载这个特性了)。比如:
而单独取一张图片也是可以的,比如:
1。用户可能是第一次访问网站,此时还无缓存
2。用户可能清空了缓存
3。缓存可能已经过期,资源将重新加载
4。用户访问的缓存文件可能不是最新的,需要重新加载
5. chrome的预加载技术
现在的chrome聪明到根据你的浏览记录,预测到你可能访问或搜索哪些网站,在你打开网站之前就加载好了一些资源了。
举个栗子,当你在搜索框输入“amaz"时,它猜测到你可能要访问amazon.com,可能就帮你加载了这个网站的一些资源。
如果这个预测算法精准的话,就能大大地提高用户的浏览体验了。
我们知道,当我们访问一个网站如www.amazon.com时,需要将这个域名先转化为对应的IP地址,这是一个非常耗时的过程。
DNS预取分析这个页面需要的资源所在的域名,浏览器空闲时提前将这些域名转化为IP地址,真正请求资源时就避免了上述这个过程的时间。
应用场景1:我们的资源存在在不同的CDN中,那提前声明好这些资源的域名,就可以节省请求发生时产生的域名解析的时间。
应用场景2:如果我们知道用户接下来的操作一定会发起一起资源的请求,那就可以将这个资源进行dns-prefetch,加强用户体验。
在Chrome下,我们可以用链接标签声明特定文件的预加载:
在Firefox中或用元标签声明:
rel=& # 39;子资源# 39;表示当前页面必须加载的资源,应该放到页面最顶端先加载,有最高的优先级。
rel=& # 39;预取# 39;表示当子资源所有资源都加载完后,开始预加载这里指定的资源,有最低的优先级。
注意:只有可缓存的资源才进行预加载,否则浪费资源!
前面说到的预解析DNS,预加载资源已经够强悍了有木有,可还有更厉害的预渲染(呈现前)!
预渲染意味着我们提前加载好用户即将访问的下一个页面,否则进行预渲染这个页面将浪费资源,慎用!
rel=& # 39; prerender& # 39;表示浏览器会帮我们渲染但隐藏指定的页面,一旦我们访问这个页面,则秒开了!
在Firefox中或用rel=& # 39;未来# 39;来声明
