android调用h5预加载图片,使用HTML5的页面资源预加载(Link prefetch)功能加速你的页面加载速度...

不管是浏览器的开发者还是普通web应用的开发者，他们都在做一个共同的努力：让Web浏览有更快的速度感觉。有很多已知的技术都可以让你的网站速度变得更快：使用CSS sprites，使用图片优化工具，使用.htaccess设置页面头信息和缓存时间，JavaScript压缩，使用CDN等。我曾经介绍过本站上使用的一些速度优化技术。而在HTML5里，出现了一个新的用来优化网站速度的新功能：页面资源预加载/预读取(Link prefetch)。

页面资源预加载/预读取(Link prefetch)是什么？来自MDN的解释:

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

简单说来就是：让浏览器预先加载用户访问当前页后极有可能访问的其他资源(页面，图片，视频等)。而且方法超级的简单！

HTML5页面资源预加载(Link prefetch)写法

HTML5页面资源预加载/预读取(Link prefetch)功能是通过Link标记实现的，将rel属性指定为“prefetch”，在href属性里指定要加载资源的地址。火狐浏览器里还提供了一种额外的属性支持：

title="Designed for Mozilla" href="mozspecific.css" />

HTTPS协议资源下也可以使用prefetch。

什么情况下应该预加载页面资源

在你的页面里加载什么样的资源，什么时候加载，这完全取决于你。下面是一些建议：

当页面有幻灯片类似的服务时，预加载/预读取接下来的1-3页和之前的1-3页。

预加载那些整个网站通用的图片。

预加载网站上搜索结果的下一页。

禁止页面资源预加载(Link prefetch)

火狐浏览器里有一个选项可以禁止任何的页面资源预加载(Link prefetch)功能，你可以这样设置：

user_pref("network.prefetch-next", false);

页面资源预加载(Link prefetch)注意事项

下面是一些关于页面资源预加载(Link prefetch)的注意事项：

预加载(Link prefetch)不能跨域工作，包括跨域拉取cookies。

预加载(Link prefetch)会污染你的网站访问量统计，因为有些预加载到浏览器的页面用户可能并未真正访问。

火狐浏览器从2003年开始就已经提供了对这项预加载(Link prefetch)技术的支持。

利用浏览器空闲时间加载一些额外的资源文件，看起来是既刺激又危险，你想试试这些技术吗？

android调用h5预加载图片,使用HTML5的页面资源预加载(Link prefetch)功能加速你的页面加载速度...相关推荐

Android调用照相机展示高清图片及展示图片时图片倾斜问题
Android调用照相机展示高清图片及展示图片时图片倾斜问题一.概述二.配置权限三.封装CameraUtil工具类 1.Android调用照相机 2.调用系统相册 3.拍摄完毕或在相册选取好照片 ...
android调用h5预加载图片,图片预加载 preload
图片预加载 HTML5学堂:2014年年初的时候,曾经在自己的博客"独行冰海"里写过关于图片预加载和懒加载的博文,当时的文章当中没有写什么关于预载的代码范例,当前打算把预载和懒载分 ...
Android 调用相机APP获取拍照图片和从相册选择图片
源码部分分析 Camera.java → 点我定位,注意研究1134行与2023行的两个方法. 通过源码可以发现,输出的图片有2个分支如果你没有指定Intent里面的Extra参数,它就返回一个序列 ...
html实现360展示图片,js html5 360度全景图片预览效果
特效描述:js html5 360度全景图片预览效果.html5实现360度全景,html5 720度全景图,html5全景图,html5全景图源代码,html5 3d全景,360度全景图,3d36 ...
android调用系统相机并获取图片
如果不是特别的要求,通过拍照的方式取得图片的话,我们一般调用系统的拍照来完成这项工作,而没必要再自己去实现一个拍照功能.调用系统相机很简单,只需要一个intent就可以跳转到相几界面,然后再通过onA ...
（复习）android 调用系统相机图库裁剪-图片上传-客服端-服务器
引用转载http://www.cnblogs.com/eyu8874521/archive/2012/07/20/2600697.html 效果: 客服端代码: package com.cn.lxz. ...
android qq图片分享到朋友圈,Android 调用系统分享文字、图片、文件，可直达微信、朋友圈、QQ、QQ空间、微博...
转载自:https://www.liangzl.com/get-article-detail-18749.html 兼容SDK 18以上的系统,直接调用系统分享功能,分享文本.图片.文件到第三方APP ...
Android调用系统相机,相册裁切图片展示的实现
效果图: MainActivity package com.example.administrator.rxxjava;import android.content.Intent; import an ...
HTML5 API详解（7）:link prefetch提升加载速度，优化体验
链接预取:浏览器会自动在后台把你需要加载的页面下载下来,当用户要点击进入该页面的时候,浏览器会从缓存把这个页面取出来,页面的加载速度就会加快. 标签属性:rel='next' 页面预加载很简单,只需要 ...

android调用h5预加载图片,使用HTML5的页面资源预加载(Link prefetch)功能加速你的页面加载速度...

android调用h5预加载图片,使用HTML5的页面资源预加载(Link prefetch)功能加速你的页面加载速度...相关推荐

最新文章

热门文章