5se7en's personal website

前端缓存机制

什么是缓存？

缓存就是用来避免频繁的到主存储器（一般来说可能是数据库，结构化的磁盘文件，远程网络接口，程序接口等等提供数据返回的）获取数据而建立的一个存取更快的临时存储器（缓存）。一般来说，缓存比主存储器更小（不一定，也可能是存储的数据结构不一样，但是存取速度非常快），但是存储的容量也比较小，但是存取速度非常快。

为什么要使用缓存？

缓存的作用：

1.存储频繁访问的数据。
2.临时存储耗时的计算结果。
3.内存缓存减少磁盘IO。

缓存的种类：

1.数据库端缓存
2.应用层缓存
3.cdn缓存
4.浏览器缓存
n.其它缓存

浏览器缓存

一个页面的缓存状态可以通过这两种方法去设置，meta标签和http response header。

一、meta标签

主要是通过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时间格式;

二、http response header

1.Cache-Control
2.Expires
3.Last-modified
4.ETag

这里的response header主要还是后端设置的，但是作为http的一个请求过程一部分，我们还是需要了解一下这个过程的

1.Cache-Control

public：指定响应会被缓存，并且在多用户间共享。也就是下图的意思。如果没有指定public还是private，则默认为public。
private：响应只作为私有的缓存，不能在用户间共享。如果要求HTTP认证，响应会自动设置为private。
no-cache：指定不缓存响应，表明资源不进行缓存。
no-store：绝对禁止缓存，每次请求资源都要从服务器重新获取。暗示请求或响应中包含机密信息，是真正的禁用缓存
max-age：（单位为s）指定设置缓存最大的有效时间，定义的是时间长短。当浏览器向服务器发送请求后，在max-age这段时间里浏览器就不会再向服务器发送请求了。
must-revalidate：指定如果页面是过期的，则去服务器进行获取。这个指令并不常用，就不做过多的讨论了。
s-maxage：（单位为s）同max-age，只用于共享缓存（比如CDN缓存）。

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一致看资源是否改变。

为什么有了last-modified还要有ETag?

i、某些服务器不能精确得到资源的最后修改时间，这样就无法通过最后修改时间判断资源是否更新

ii、如果资源修改非常频繁，在秒以下的时间内进行修改，而Last-modified只能精确到秒

iii、一些资源的最后修改时间改变了，但是内容没改变，使用ETag就认为资源还是没有修改的。

HTML5之离线缓存

离线缓存是Html5新特性之一，简单理解就是第一次加载后将数据缓存，在没有清除缓存前提下，下一次没有网络也可以加载，用在静态数据的网页或游戏比较好用。当然，Html5新的特性都不是所有浏览器都能支持的，离线缓存也一样。反正IE9（包括）及IE9以下的浏览器目前是不支持的。如果用在移动端，应该都能支持。检测是否支持离线缓存也是比较简单的。

      
        <script>
            if(window.applicationCache){
                alert("支持离线缓存");
            }
            else{
                alert("不支持离线缓存");
            }
        </script>

实现HTML5应用程序缓存非常简单，只需三步，并且不需要任何API。只需要告诉浏览器需要离线缓存的文件，并对服务器和网页做一些简单的设置即可实现。

创建一个 cache.manifest 文件，并确保文件具有正确的内容。
在服务器上设置内容类型。
将网站所有的HTML文件都指向 cache.manifest。

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>

离线缓存对象详细的API，请自行查阅相关文档

HTML5之本地存储

LocalStorage
SessionStorage

cookie、Session和LocalStorage以及SessionStorage之间的区别这里就不再赘述了，不了解的同学可以自行搜索了解,这里主要简单说说和缓存相关的知识。

其实就是把请求拿到的数据，存储中本地存储当中，下次在进入这个页面当中直接从本地存储获取相应的数据。

注意事项

1.存储数据时注意字符串化，web storage拥有像getItem，setItem，clear等方法

2.LocalStorage在PC上的兼容性不太好，而且当网络速度快、协商缓存响应快时使用localStorage的速度比不上304。并且不能缓存css文件。而移动端由于网速慢，使用localStorage要快于304。

3.无痕模式下LocalStorage以及SessionStorage是不可使用的。