258资源分享网

最近手上刚刚拆掉石膏，去楼下房友帮忙。楼下房友领导来自阿里，前端用的是阿里的ant-design，设计将设计图上传到蓝湖，聊天工具也采用阿里的钉钉。有时间我也多多去楼下房友交流学习，多交流，就会有提升。最近也比较忙，好久没有更新博客了。闲言少叙，今天主要谈谈前端性能优化之浏览器缓存。

我前面写过浏览器缓存的文章，也写过html5离线缓存，关于这些缓存，我们很容易搞不清，例如：200 OK (FROM MemoryCache、FROM DiskCache) 及 304 NOT MODIFIED 还有 application cache (离线缓存)等等。

200 from memory cache 不访问服务器，直接读缓存，从内存中读取缓存。此时的数据时缓存到内存中的，当kill进程后，也就是浏览器关闭以后，数据将不存在。但是这种方式只能缓存派生资源

200 from disk cache 不访问服务器，直接读缓存，从磁盘中读取缓存，当kill进程时，数据还是存在。这种方式也只能缓存派生资源

304 Not Modified 访问服务器，发现数据没有更新，服务器返回此状态码。然后从缓存中读取数据。

先去内存看，如果有，直接加载

如果内存没有，择取硬盘获取，如果有直接加载

如果硬盘也没有，那么就进行网络请求

加载到的资源缓存到硬盘和内存

一般浏览图片，如下流程：

访问-> 200 -> 退出浏览器

再进来-> 200(from disk cache) -> 刷新 -> 200(from memory cache)

application cache和上面缓存有点区别，是离线缓存，就是资源可以从硬盘上读取而不用联网，即使断网，用户也可以浏览。

304是协商缓存还是要和服务器通信一次，要想断绝服务器通信，就要强制浏览器使用本地缓存（cache-control/expires），

一般有如下几种方式设置浏览器缓存。

1、通过HTTP的META设置expires和cache-control