什么是缓存?
缓存就是用来避免频繁的到主存储器(一般来说可能是数据库,结构化的磁盘文件,远程网络接口,程序接口等等提供数据返回的)获取数据而建立的一个存 取更快的临时存储器(缓存)。一般来说,缓存比主存储器更小(不一定,也可能是存储的数据结构不一样,但是存取速度非常快),但是存储的容量也比较小,但是存取速度非常快。
缓存就是用来避免频繁的到主存储器(一般来说可能是数据库,结构化的磁盘文件,远程网络接口,程序接口等等提供数据返回的)获取数据而建立的一个存 取更快的临时存储器(缓存)。一般来说,缓存比主存储器更小(不一定,也可能是存储的数据结构不一样,但是存取速度非常快),但是存储的容量也比较小,但是存取速度非常快。
一个页面的缓存状态可以通过这两种方法去设置,meta标签和http response header。
主要是通过meta标签中的http-equiv属性和content属性设定缓存,比如:
<meta http-equiv="pragma" content="no-cache">
是用于设定禁止浏览器从本地机的缓存中调阅页面内容,设定后一旦离开网页就无法从Cache中再调出;
<meta http-equiv="cache-control" content="no-cache">
常见的取值有private、no-cache、max-age、public等,默认为private
<meta http-equiv="expires" content="0">
可以用于设定网页的到期时间,一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式;
这里的response header主要还是后端设置的,但是作为http的一个请求过程一部分,我们还是需要了解一下这个过程的
1.Cache-Control
2.Expires
缓存过期时间,用来指定资源到期的时间,是服务器端的具体的时间点。如果客户端的时间与服务器的时间相差很大,那么误差就很大
如果Cache-Control的max-age和Expires同时存在,Cache-Control的max-age优先
3.Last-modified
服务器端文件的最后修改时间,需要和cache-control共同使用,是检查服务器端资源是否更新的一种方式。当浏览器再次进行请求时,会向服务器传送If-Modified-Since报头,询问Last-Modified时间点之后资源是否被修改过。如果没有修改,则返回码为304,使用缓存;如果修改过,则再次去服务器请求资源,返回码和首次请求相同为200,资源为服务器最新资源。
4.ETag
根据实体内容生成一段hash字符串,标识资源的状态,由服务端产生,资源改变这个值就会改变个人感觉类似于资源的一种抽象映射。请求过程类似于last-modified,不过它作为if-none-match(服务端响应的ETag)发送给服务端判断这个值是否与服务端的ETag一致看资源是否改变。
i、某些服务器不能精确得到资源的最后修改时间,这样就无法通过最后修改时间判断资源是否更新
ii、如果资源修改非常频繁,在秒以下的时间内进行修改,而Last-modified只能精确到秒
iii、一些资源的最后修改时间改变了,但是内容没改变,使用ETag就认为资源还是没有修改的。
离线缓存是Html5新特性之一,简单理解就是第一次加载后将数据缓存,在没有清除缓存前提下,下一次没有网络也可以加载,用在静态数据的网页或游戏比较好用。当然,Html5新的特性都不是所有浏览器都能支持的,离线缓存也一样。反正IE9(包括)及IE9以下的浏览器目前是不支持的。如果用在移动端,应该都能支持。检测是否支持离线缓存也是比较简单的。
<script>
if(window.applicationCache){
alert("支持离线缓存");
}
else{
alert("不支持离线缓存");
}
</script>
实现HTML5应用程序缓存非常简单,只需三步,并且不需要任何API。只需要告诉浏览器需要离线缓存的文件,并对服务器和网页做一些简单的设置即可实现。
1.cache.manifest 文件
CACHE MANIFEST
# 第一行必须是”CACHE DMANIFEST”
# version 1.0.0
CACHE:
# 需要缓存的内容
index.html
404.html
favicon.ico
robots.txt
humans.txt
apple-touch-icon.png
css/normalize.min.css
css/main.css
css/bootmetro-icons.min.css
img/pho-cat.jpg
img/pho-huangshan.jpg
FALLBACK:
#第一个资源文件为能够在线访问时使用的资源文件,第二个资源文件为不能在线访问时使用的备用资源文件。
online.js local.js
NETWORK:
#指定在线白名单,即列出我们不希望离线存储的文件,因为通常它们的内容需要互联网访问才有意义。
*
2.在服务器上设置内容类型
真正运行或测试离线web应用程序的时候,需要对服务器进行配置,让服务器支持text/cache-manifest这个MIME类型(在h5中规定manifest文件的MIME类型是text/cache-manifest)。例如对Apache服务器进行配置的时候,需要找到 {apache_home}/conf/mime.type这个文件(.htaccess),并在文件最后添加如下所示代码: text/cache-manifest .manifest 。
3.设置HTML文件的指向
<html manifest=”/cache.manifest” >
...
</html>
cookie、Session和LocalStorage以及SessionStorage之间的区别这里就不再赘述了,不了解的同学可以自行搜索了解,这里主要简单说说和缓存相关的知识。
其实就是把请求拿到的数据,存储中本地存储当中,下次在进入这个页面当中直接从本地存储获取相应的数据。
1.存储数据时注意字符串化,web storage拥有像getItem,setItem,clear等方法
2.LocalStorage在PC上的兼容性不太好,而且当网络速度快、协商缓存响应快时使用localStorage的速度比不上304。并且不能缓存css文件。而移动端由于网速慢,使用localStorage要快于304。
3.无痕模式下LocalStorage以及SessionStorage是不可使用的。