前端性能优化之——缓存

来源：互联网发布：淘宝卖家报复的买家编辑：程序博客网时间：2024/06/12 20:12

*缓存是前端性能优化的重要方式之一。缓存方式有多种，但都不难理解。
实现方式大致分三类：HTTP协议头控制，Dom Storage、AppCache。*
一.HTTP协议头控制
Cache-Control用于控制文件在本地缓存有效时长。
最常见的，比如服务器回包：
Cache-Control:max-age=600表示文件在本地应该缓存，且有效时长是600秒（从发出请求算起）。在接下来600秒内，如果有请求这个资源，浏览器不会发出HTTP请求，而是直接使用本地缓存的文件。
Last-Modified是标识文件在服务器上的最新更新时间。下次请求时，如果文件缓存过期，浏览器通过If-Modified-Since字段带上这个时间，发送给服务器，由服务器比较时间戳来判断文件是否有修改。如果没有修改，服务器返回304告诉浏览器继续使用缓存；如果有修改，则返回200，同时返回最新的文件。
Cache-Control通常与Last-Modified一起使用。一个用于控制缓存有效时间，一个在缓存失效后，向服务查询是否有更新。
Cache-Control还有一个同功能的字段：Expires。Expires的值一个绝对的时间点，如：Expires: Thu, 10 Nov 2015 08:45:11 GMT，表示在这个时间点之前，缓存都是有效的。
Expires是HTTP1.0标准中的字段，Cache-Control是HTTP1.1标准中新加的字段，功能一样，都是控制缓存的有效时间。当这两个字段同时出现时，Cache-Control是高优化级的。

二.Dom Storage存储机制
localStorage 对象和 sessionStorage 对象使用方法基本相同，它们的区别在于作用的范围不同。sessionStorage 用来存储与页面相关的数据，它在页面关闭后无法使用。而 localStorage 则持久存在，在页面关闭后也可以使用。
Dom Storage 给Web提供了一种更录活的数据存储方式，存储空间更大（相对Cookies)，用法也比较简单，方便存储服务器或本地的一些临时数据。
从DomStorage提供的接口来看，DomStorage适合存储比较简单的数据，如果要存储结构化的数据，可能要借助JASON了，将要存储的对象转为JASON字串。不太适合存储比较复杂或存储空间要求比较大的数据，也不适合存储静态的文件等。
H5也提供基于SQL的数据库存储机制，用于存储适合数据库的结构化数据。根据官方的标准文档，Web SQL Database存储机制不再推荐使用，将来也不再维护，而是推荐使用AppCache和IndexedDB。

三.Application Cache机制
Application Cache（简称AppCache)似乎是为支持Web App离线使用而开发的缓存机制。它的缓存机制类似于浏览器的缓存（Cache-Control 和 Last-Modified）机制，都是以文件为单位进行缓存，且文件有一定更新机制。但AppCache是对浏览器缓存机制的补充，不是替代。
可以参考runoob的案例

<!DOCTYPE HTML><html manifest="demo.appcache"><body>文档内容......</body></html>

在开发者工具中可以看到资源已保存在Application Cache中
这里写图片描述
实例 - 完整的 Manifest 文件

CACHE MANIFEST    //浏览器会下载这三个文件。然后，无论因特网断开，依然会用这些资源# 2012-02-21 v1.0.0/theme.css/logo.gif/main.jsNETWORK:         //规定文件 "login.php" 永远不会被缓存，且离线时是不可用的：login.phpFALLBACK:        //如果无法连接因特网，则用"offline.html"替代/html5/目录中的所有文件/html/ /offline.html

一旦应用被缓存，它就会保持缓存直到发生下列情况：
- 用户清空浏览器缓存
- manifest 文件被修改（参阅下面的提示）
- 由程序来更新应用缓存

阅读全文

1 0