HTML5缓存机制

         H5是新一代html的标准，缓存机制是其中一个重要的特性。

         HTML5应用程序缓存为应用带来三个优势：

                     ①  离线浏览：用户可在应用离线时使用它们；

                     ②  速度：已缓存资源加载得更快；

                    ③  减少服务器负载：浏览器将只从服务器下载更新过或更改过的资源。

         到目前为止，HTML5一共有6种缓存机制，有些是之前已有，有些是HTML5才新加入的。场景采用具体的策略，没有十全十美的选择，只有合适的选择。总结为下图：

       

         HTML5缓存机制原理分析：

         浏览器缓存机制：

          一般浏览器会将缓存记录及缓存文件存在本地Cache文件夹中。Android下App如果使用Webview，缓存的文件记录及文件内容会存在当前App的Data目录中。

          分析：Cache-Control和Last-Modified一般用在Web的静态资源文件上，如JS、CSS 和一些图像文件。通过设置资源文件缓存属性，对提高资源文件加载速度，节省流量很有意义，特别是移动网络环境。但问题是：缓存有效时长该如何设置？如果设置太短，就起不到缓存的使用；如果设置的太长，在资源文件有更新时，浏览器如果有缓存，则不能及时取到最新的文件。

         Last-Modified需要向服务器发起查询请求，才能知道资源文件有没有更新。虽然服务器可能返回304告诉没有更新，但也还有一个请求的过程。对于移动网络，这个请求可能是比较耗时的。有一种说法叫“消灭304”，指的就是优化掉304的请求。

        在实际应用中，为了解决Cache-Control缓存时长不好设置的问题，以及为了“消灭304”，Web前端采用的方式是：

       在要缓存的资源文件名中加上版本号或文件MD5值字串，如common.d5d02a02.js、common.v1.js，同时设置Cache-Control:max-age=31536000，也就是一年。在一年时间内，资源文件如果本地有缓存，就会使用缓存；也就不会有304的回包。

        如果资源文件有修改，则更新文件内容，同时修改资源文件名，如common.v2.js，html页面也会引用新的资源文件名。通过这种方式，实现了：缓存文件没有更新，则使用缓存；缓存文件有更新，则第一时间使用最新文件的目的。

         1、Dom Storage存储机制

        类似于cookie（一般4k），但是容量更大，更快捷，更方便。分为sessionestorage和localstorage。从而可以代替掉将一些不需要让服务器知道的信息存储到Cookies里的这种传统方法。

        Dom Storage是通过存储字符串的Key/Value对来提供的，另外DomStorage存储的数据在本地，不像 Cookies，每次请求一次页面，Cookies 都会发送给服务器。

       分析：Dom Storage给Web提供了一种更录活的数据存储方式，存储空间更大（相对Cookies），用法也比较简单，方便存储服务器或本地的一些临时数据。

        Local Storage保存的数据是持久性的。当前Page关闭（PageSession结束后），保存的数据依然存在。重新打开Page，上次保存的数据可以获取到。另外，Local Storage是全局性的，同时打开两个Page会共享一份存数据，在一个Page中修改数据，另一个Page中是可以感知到的。

        从Dom Storage提供的接口来看，DomStorage适合存储比较简单的数据，如果要存储结构化的数据，可能要借助JSON了，将要存储的对象转为JSON字串。不太适合存储比较复杂或存储空间要求比较大的数据，也不适合存储静态的文件等。

        2、Web SQLDatabase存储机制

         HTML5也提供基于SQL的数据库存储机制，用于存储适合数据库的结构化数据。根据官方的标准文档，Web SQL Database存储机制不再推荐使用，将来也不再维护，而是推荐使用AppCache和IndexedDB。

         现在主流的浏览器都还是支持Web SQLDatabase存储机制的。Web SQL Database存储机制提供了一组API供Web App创建、存储、查询数据库。

         3、Application Cache机制

         分析：AppCache看起来是一种比较好的缓存方法，除了缓存静态资源文件外，也适合构建Web离线 App。在实际使用中有些需要注意的地方，有一些可以说是”坑“。

         要更新缓存的文件，需要更新包含它的manifest文件，那怕只加一个空格。常用的方法，是修改manifest文件注释中的版本号。如：# 2012-02-21 v1.0.0；被缓存的文件，浏览器是先使用，再通过检查manifest文件是否有更新来更新缓存文件。这样缓存文件可能用的不是最新的版本。在更新缓存过程中，如果有一个文件更新失败，则整个更新会失败。

          manifest和引用它的HTML要在相同Host。

          manifest文件中的文件列表，如果是相对路径，则是相对manifest文件的相对路径。

           manifest也有可能更新出错，导致缓存文件更新失败。

          没有缓存的资源在已经缓存的HTML中不能加载，即使有网络。例如：http://appcache-demo.s3-website-us-east-1.amazonaws.com/without-network/。

          manifest文件本身不能被缓存，且manifest文件的更新使用的是浏览器缓存机制。所以manifest文件的Cache-Control缓存时间不能设置太长。

          另外，根据官方文档，AppCache已经不推荐使用了，标准也不会再支持。现在主流的浏览器都是还支持AppCache的，以后就不太确定了。

          4、Indexed Database

          IndexedDB也是一种数据库的存储机制，但不同于已经不再支持的Web SQL Database。IndexedDB不是传统的关系数据库，可归为NoSQL数据库。IndexedDB又类似于Dom Storage的key-value的存储方式，但功能更强大，且存储空间更大。

           IndexedDB存储数据是key-value的形式。Key是必需，且要唯一；Key可以自己定义，也可由系统自动生成。Value也是必需的，但Value非常灵活，可以是任何类型的对象。一般Value都是通过Key来存取的。

           IndexedDB提供了一组API，可以进行数据存、取以及遍历。这些API都是异步的，操作的结果都是在回调中返回。

           IndexedDB有个非常强大的功能，就是index（索引）。它可对Value对象中任何属性生成索引，然后可以基于索引进行Value对象的快速查询。

           要生成索引或支持索引查询数据，需求在首次生成存储对象时，调用接口生成属性的索引。可以同时对对象的多个不同属性创建索引。如下面代码就对name和email两个属性都生成了索引。

           5、File System API

           File System API是HTML5新加入的存储机制。它为WebApp提供了一个虚拟的文件系统，就像Native App访问本地文件系统一样。由于安全性的考虑，这个虚拟文件系统有一定的限制。Web App在虚拟的文件系统中，可以进行文件（夹）的创建、读、写、删除、遍历等操作。

           File System API也是一种可选的缓存机制，和前面的SQL Database、IndexedDB 和App Cache等一样。File System API有自己的一些特定的优势：

          可以满足大块的二进制数据（largebinary blobs）存储需求。可以通过预加载资源文件来提高性能。可以直接编辑文件。

           浏览器给虚拟文件系统提供了两种类型的存储空间：临时的和持久性的。临时的存储空间是由浏览器自动分配的，但可能被浏览器回收；持久性的存储空间需要显示的申请，申请时浏览器会给用户一提示，需要用户进行确认。持久性的存储空间是Web App自己管理，浏览器不会回收，也不会清除内容。持久性的存储空间大小是通过配额来管理的，首次申请时会一个初始的配额，配额用完需要再次申请。

虚拟的文件系统是运行在沙盒中。不同WebApp的虚拟文件系统是互相隔离的，虚拟文件系统与本地文件系统也是互相隔离的。

File System API提供了一组文件与文件夹的操作接口，有同步和异步两个版本，可满足不同的使用场景。下面通过一个文件创建、读、写的例子，演示下简单的功能与用法。

         结论：综合各种缓存机制比较，对于静态文件，如JS、CSS、字体、图片等，适合通过浏览器缓存机制来进行缓存，通过缓存文件可大幅提升Web的加载速度，且节省流量。但也有一些不足：缓存文件需要首次加载后才会产生；浏览器缓存的存储空间有限，缓存有被清除的可能；缓存的文件没有校验。要解决这些不足，可以参考手 Q 的离线包，它有效的解决了这些不足。

       对于Web在本地或服务器获取的数据，可以通过Dom Storage和IndexedDB进行缓存。也在一定程度上减少和Server的交互，提高加载速度，同时节省流量。

        当然Web的性能优化，还包括选择合适的图片大小，避免JS和CSS造成的阻塞等。这就需要Web前端的同事根据一些规范和一些调试工具进行优化了。