协商缓存和强缓存让你飞起！

在我们的日常工作中，前端代码打包之后的生成的静态资源就要发布到静态服务器上，这时候就要做对这些静态资源做一些运维配置，其中，gzip和设置缓存是必不可少的。这两项是最直接影响到网站性能和用户体验的。本文将重点讨论缓存，尤其是协商缓存和强缓存，并为你提供一些使用场景和配置方法。

缓存简介

缓存是一种临时存储器，它位于CPU和内存之间，用于存储最近使用过的数据，以便下次需要时可以更快地访问。当处理器需要访问数据时，它会首先检查缓存中是否有该数据。如果有，则直接从缓存中读取数据；如果没有，则从内存或磁盘中读取数据，并将数据存储在缓存中，以便下次访问时可以直接从缓存中读取。

缓存可以极大地提高系统的性能，因为它可以减少处理器访问内存或磁盘的次数。内存的访问速度比磁盘快得多，而缓存的访问速度又比内存快得多。因此，使用缓存可以大大减少数据访问的延迟。

协商缓存

协商缓存是一种有条件的缓存机制。当浏览器请求一个资源时，它会先向服务器发送一个请求，询问服务器该资源是否被修改过。如果服务器返回的响应头中包含Etag或Last-Modified字段，则浏览器会将这些字段与本地缓存中的资源进行比较。如果Etag或Last-Modified字段相同，则浏览器将使用本地缓存中的资源，否则将向服务器请求新的资源。

协商缓存的优点是，它可以减少服务器的负载，提高网站的性能。因为当浏览器使用本地缓存的资源时，服务器就不需要重新生成该资源。

协商缓存的缺点是，它需要浏览器和服务器之间的通信。如果浏览器和服务器之间的网络连接速度较慢，则协商缓存可能会增加网站的延迟。

强缓存

强缓存是一种无条件的缓存机制。当浏览器请求一个资源时，它会直接从本地缓存中读取资源，而不会向服务器发送请求。

强缓存的优点是，它可以提高网站的性能，减少服务器的负载。因为浏览器不需要向服务器发送请求，就可以直接从本地缓存中读取资源。

强缓存的缺点是，它可能会导致浏览器无法获取最新的资源。因为当服务器更新资源时，浏览器不会自动更新本地缓存中的资源。

使用场景

协商缓存和强缓存都可以在网站优化中发挥作用。协商缓存适用于那些经常被访问但又经常更新的资源，如新闻文章、博客文章、产品页面等。强缓存适用于那些不经常被更新的资源，如静态文件、JavaScript文件、CSS文件等。

配置方法

在服务器端，可以使用Nginx或Apache等Web服务器来配置缓存。在Nginx中，可以通过在配置文件中添加以下配置来启用协商缓存：

location / {
    add_header ETag "$file_mtime";
    expires 30d;
}

在Apache中，可以通过在配置文件中添加以下配置来启用协商缓存：

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
</IfModule>

在客户端，可以使用浏览器来配置缓存。在Chrome浏览器中，可以通过在地址栏中输入“chrome://settings/content”来打开内容设置页面。在内容设置页面中，可以找到“缓存”选项，并可以设置缓存的大小和过期时间。

结论

协商缓存和强缓存都是提高网站性能的有效手段。合理使用缓存可以减少服务器的负载，提高网站的性能，改善用户体验。