页面相关的数据存储(缓存及Web Storage)

ゞ浴缸里的玫瑰 2022-08-25 08:38 37阅读 0赞

页面可用的缓存包括:Http Cache, Local Storage, Session Storage以及Application Cache. 它们都可以用来减少请求数量，以提高页面的性能及减少流量消耗，这对于移动端的浏览器来说更为重要 (另外还有Memory Cache, 不过对于前端工程而言是透明的)。

**![SouthEast][]**

## Http Cache ##

最为常用的缓存机制。相对后三项属于浏览器内核内的模块(也是H5中定义的标准)，Http Cache早已存在于HTTP模块中了。它是网络层对HTTP协议实现中一部分。它基于对响应头中的Cache Conrol信息进行解析，执行新鲜度检查、条件更新等操作来管理缓存。缓存的容量限制及淘汰、更新算法在各个浏览器中实现都不相同，属于浏览器及页面开发优化的一个重点。比如缓存赵多的内容会使得网页请求的数量更少，但是缓存的内容达到一定量后，会导致查询及I/O变慢，反而使得投入产出比下降。容量是基于存储空间而定，不同的浏览器会有不同的最大值，而且不同的用户在实际使用是对缓存总量的依赖也不同。这些都是浏览器性能优化时考虑的内容。

详细内容可以通过<<[管好页面缓存][Link 1]>>了解。

它的一个问题在于缓存内容的淘汰基于算法的实现，无法保证单独针对需要保留某个资源。所有的资源都可能因为缓存策略的变化，存储空间的变化而遭到淘汰。所以针对这种场景，HTML5定义了能更好地支持离线浏览的Applcation Cache。

## **Application Cache**  ##

应用于离线场景下可以让用户继续使用页面的场景，比如支持离线的游戏、及Office编辑应用等。 没有明确的容量限制，WebKit系列的浏览器会有每个域名5MBytes的限制(默认而已，具体会有变化)。考虑到一些浏览器存储时使用UTF-16编码，并不能真正达5MBytes。

Application Cache是一种基于请求的主动缓存，缓存的内容受Cache Control信息控制，包括相关的新鲜度检测等。

实际应用时, Application Cache比较容易出问题, 典型的有，如何更改manifest文件以达到资源更新的目的，以及可能会造成重复缓存(manifest解析的时机不同)。 在决定使用Application Cache，一定要好好读读这篇文章:<<[Application Cache is a Douchebag][]>>。

Application Cache提供的API非常简单，它并不依赖于JS就可以实现缓存的目的，同是又可以通过API来获得缓存的状态。详细内容参考H5规范中的定义<<[Offline Web Applications][]>>。

## **Local Storage & Session Storage** ##

使用方式和Cookie相似，主要应对Cookie不适合存储较大数据的情况，否则会导致与服务器交互的数据变大，性能易受到影响。。相对于Applcation Cache, 它们的使用依赖于JS, 但是简单明确。

Local Storage及Session Storage在H5称为[Web Storage][], 使用相同的API, 只是两者存在周期不同。前者可以一直存储，没有时间限制。后者则只存在于一个会话期，用户关闭浏览器后就会清除（除非浏览器支持重启后恢复上次的会话）。

在存储的API中，有不同的调用方式, 其性能是有差异的，并且不同的浏览器表现迥异：

![SouthEast 1][]

![SouthEast 2][]

可能的原因是相对大家都关注的JS Engine执行性能问题的逐步改善，DOM的操作时间对性能的影响更大。下面的数据来自IE团队针对使用较多AJAX请求的页面的统计:

![SouthEast 3][]

Web Storage的最大问题在于存储的同步问题，好在有一些JS库可以帮助改善这个问题。详细的内容可以阅读<<HTML5 and JavaScript Web Apps>>第6章Optimizing with Web Storage.

转载请注明出处: [http://blog.csdn.net/horkychen][http_blog.csdn.net_horkychen]

[SouthEast]: /images/20220824/364b470a381446bd8a0a1f451d6090c5.png
[Link 1]: http://blog.csdn.net/horkychen/article/details/19369521
[Application Cache is a Douchebag]: http://alistapart.com/article/application-cache-is-a-douchebag
[Offline Web Applications]: http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#offline
[Web Storage]: http://www.whatwg.org/specs/web-apps/current-work/multipage/index.html#auto-toc-11
[SouthEast 1]: /images/20220824/a8da767c8442413599c8fbb87c6aab14.png
[SouthEast 2]: /images/20220824/1fd38e413b704815be873a4b466ebaf0.png
[SouthEast 3]: /images/20220824/121b36bbcae24f71ac4290e4e3cfa9c9.png
[http_blog.csdn.net_horkychen]: http://blog.csdn.net/horkychen