缓存优化效果实测记录

一.浏览器的缓存机制

缓存是做web优化的过程中始终绕不开的一个话题，因为优化的重头戏就是资源的加载速度；如果能直接使用缓存，就可以避免向服务器请求及加载资源，极大的减少下载文件的大小及个数，在性能的优化上会体现的非常明显。

客户端的缓存原理如下图所示：

浏览器在首次进行请求的时候，此时还没有缓存；服务器接收到请求后，会在响应头加上Etag值，用以标识文件是否变化；而当浏览器再次请求相同资源的时候，会将上次响应头中的Etag值放到请求头中；而服务器再次接收到请求以后，会根据回传的If-None-Match以及If-Modified-Since字段进行判断，如果文件没有变化，就直接返回304而不是完整的资源，从而优化加载速度；这就是浏览器缓存的基本工作方式；

304示例

而如果我们在第一次请求的时候就设置好了过期时间（即cache-control或者expire的值），浏览器再次访问相同资源的时候，就可以直接使用缓存，避免了再发起一次请求；这样就减少了一次请求，提升了浏览器的性能并且减少了服务器的负载；

200示例

实际效果到底如何呢？请参照我的实测数据。

二.实测结果

这是我们实际项目中的页面，大致如下；

网络环境皆为chrome开发者调试工具模拟；

在3g网络条件下首次加载该页面

在3g网络条件下不设置cache-control/expire值，再次访问该页面;此时返回值为304

此时资源的返回码是304。size一栏是当前304请求（即没有返回完整资源）的实际大小；可以看到无论是请求大小还是加载时间都少了很多，这就是我们第一遍打开页面比较慢，再次打开就会比较快的原因；

在3g网络条件下设置cache-control/expire值，再次访问该页面;此时返回值为200（from cache）

此时资源的返回码是200， size一栏是“200 from cache”，即直接启用了缓存的内容；而与没有设置cache-control/expire相比，加载时间大致减少了三分之一到四分之一，还是很可观的；

以下是2g网络条件下的情况，与3g情况下大致相同，只是慢了一点

首次加载：

不设置cache-control

设置cache-control

三.服务器端缓存

实际运行的项目中，除了静态资源还有动态资源，如接口；对于他们的优化通常通过服务器端缓存来解决；

服务器端无缓存情况下加载接口数据的情况（统计了20次的数据）

服务器端有缓存情况下加载接口数据的情况（统计了20次的数据）