说到缓存，web开发者总会想到数据库缓存、页面静态、使用Redis内存缓存。这些方法有一个共同点，就是都集中在后台，目的是加快数据的读取速度，少用一些更容易造成瓶颈的部分。后台所有该优化的都优化到最好的状态，却往往忽略了一个很重要的过程，那就是数据传输。想着如何快速读取数据，却忘记了如何少请求数据，或者根本不请求数据。那么，今天我们就来说说这个经常被我们遗忘的浏览器缓存。了解浏览器缓存当浏览器请求一个网站时，它会加载各种资源，例如HTML文档、图片、CSS和JS文件。对于一些不经常变化的内容，浏览器会将其保存在本地文件中，下次访问同一网站时直接加载这些资源，以加快访问速度。浏览器保存的这些文件称为缓存。（不是指Cookie或Localstorage）。那么如何知道浏览器是读取了缓存还是直接请求了服务器呢？我们以Segmentfault网站为例（见下图）。首次打开网站后，如果再次刷新页面。你会发现，在浏览器加载的众多资源中，有些资源是有特定大小值的，但是有些请求，比如图片、css、js文件，并没有显示文件大小，而是显示来自dis缓存或者从内存缓存。这意味着资源是直接从内存或本地硬盘中读取的，不需要请求服务器。查看缓存知道浏览器从缓存中读取文件，那么浏览器缓存文件存放在哪里呢？以chrome为例，直接在浏览器地址栏输入：chrome://cache/即可打开所有最近的缓存文件链接，当然也可以直接点击打开缓存内容。至于其背后的文件，一般存在于：C:\Users\yanying\AppData\Local\Google\Chrome\UserData\Default\Cache路径，其中yanying是你的windows用户名。从上图可以看出缓存协商。有些请求使用缓存，而有些缓存不使用缓存。浏览器要判断什么时候做什么，就必须有一个判断标准。这里需要用到缓存协商。简单的说，就是浏览器和服务器约定的一个规则，什么情况下请求资源，什么情况下不请求。缓存协商方式和Cookie、User-Agent一样，都是通过浏览器头部传递的。有3种缓存协商方式：Last-ModifiedETagExpiresLast-modified定义Last-Modified标签表示文件的最后修改时间，其格式为标准的GMT时间。注：GMT为标准格林威治标准时间，我国为GMT+8时区。所以你看到的Last-Modified和我们的时间有8小时的差距，但不影响使用。一般动态资源没有所谓的最后修改时间。css文件、图片等静态文件可以通过stat()系统调用获取文件的最后修改时间。但实际网站运行时，Web服务器（如Apache）会自动获取静态资源的最后修改时间，并会自动在HTTP头文件中加上Last-Modified标签。静态资源对应的头文件如下图所示：对于含有Last-Modified标签的资源，浏览器会在下次请求时携带这次。服务器收到请求后，会在收到请求后检查文件是否被修改。如果修改过，则直接返回数据。如果没有修改，则直接返回一个304状态码，告诉浏览器直接使用本地缓存。这样就免去了一次数据传输流量，速度略有加快。虽然在动态资源中使用动态资源时并没有相对意义上的最后修改时间，但是我们仍然可以直接通过发送headers来手动定义Last-Modified。这样，通过动态程序判断，也可以达到静态资源节省数据传输流量的效果。下面是一个使用PHP的例子：1.首先创建一个php文件并发送一个Last-Modified头标签：ExpiresActiveonExpiresByTypeimage/gif"accessplus1month"ExpiresByTypetext/css"nowplus2day"ExpiresDefault"nowplus1day"上面配置我们设置image/gif格式图片缓存时间为1个月，css文件缓存时间为2天，其他默认为1天。另外，对于常用的静态资源。如果web服务器端没有设置expires标签，浏览器也可以智能标记一个过期时间。例如对于一张gif图片，浏览器会将其过期时间设置为永不过期。在动态资源中使用Expires这里我们还是以PHP为例1.首先创建一个PHP文件，发送Expires头标签。这里我们直接设置文件过期时间为2020年1月1日0:00，其中
