当前位置：首页 > article >正文

网站缓存入门与实战：浏览器与Nginx/Apache服务器端缓存，让网站速度起飞！(2025)

article 2025/6/1 10:34:26

更多服务器知识，尽在hostol.com

嘿，各位站长和网站管理员朋友们！咱们精心打造的网站，内容再好，设计再炫，如果用户打开它的时候，加载速度慢得像“老牛拉破车”，那体验可就大打折扣了，说不定用户等不及就直接“拜拜”了。除了拥有给力的服务器硬件和优化的代码，还有一个能让你网站速度“原地起飞”的“魔法秘籍”——那就是缓存（Caching）！是不是听起来有点玄乎？别急，今天Hostol就来当一回“魔法导师”，带你揭开“浏览器缓存”和“服务器端页面缓存”这两大“加速咒语”的神秘面纱，并手把手教你怎么在Nginx和Apache上施展它们，让你的网站也能拥有风驰电掣般的速度！

缓存是个啥？—— 省时省力的“记忆大师”

在聊具体的“魔法咒语”之前，咱们先得明白，“缓存”这位“记忆大师”到底是何方神圣。简单来说，缓存就是把一些经常被访问的、或者生成起来比较费劲的数据，预先存放在一个更容易获取的地方（比如用户的浏览器里，或者服务器的内存/硬盘上），当下次再需要这些数据时，就可以直接从这个“快捷通道”取用，而不用每次都辛辛苦苦地重新去“源头”（比如服务器深处、数据库）获取或生成一遍。

想象一下，你去图书馆借一本超级热门的书：

没有缓存： 图书管理员每次都得从最里面的书库（源服务器/数据库）把书给你找出来，效率低下。
有了缓存： 图书管理员发现这本书太火了，就直接在咨询台（缓存区）放了几本复印件或者原书。你一来，直接从咨询台拿走，是不是快多了？

网站缓存的原理也是如此，目的就是为了：减少等待时间，降低服务器压力，提升用户体验！ 咱们主要聊两种最常用也最有效的缓存魔法：浏览器缓存和服务器端页面缓存。

第一重魔法：浏览器缓存 —— 给访客的“极速重逢”体验

浏览器缓存，顾名思义，就是让访问你网站的用户，他们的浏览器把一些不常变化的“静态资源”（比如你网站的Logo图片、CSS样式表、JavaScript脚本文件等）在第一次访问时就“下载并保存”到用户自己的电脑上。

这样，当这位用户再次访问你的网站，或者访问你网站的其他页面时，如果又需要用到这些已经“存好”的资源，浏览器就可以“就地取材”，直接从本地硬盘加载，而不用眼巴巴地再从你的服务器上重新下载一遍。这感觉，就像是老朋友重逢，不用过多寒暄，默契十足，自然神速！

施法道具：HTTP响应头里的“缓存咒语”

浏览器听不听话，肯不肯缓存你的资源，以及缓存多久，主要就靠你（的服务器）在HTTP响应头里下达的“缓存指令”了。常用的“咒语”有：

Expires (过期时间)： 这是个比较老的“咒语”，它直接告诉浏览器这个资源在某个具体的“绝对时间点”（比如：Expires: Wed, 28 May 2025 12:00:00 GMT）之前都有效，可以大胆用缓存。但它的问题在于，服务器和客户端的时间可能不同步，导致判断失误。
Cache-Control (缓存控制)： 这是更现代、更强大也更灵活的“主控咒语”，优先级也比Expires高。它有很多“法术变种”：
- max-age=<秒数>：告诉浏览器这个资源从现在开始，在多少秒内都是新鲜的，可以直接用缓存。比如Cache-Control: max-age=31536000（缓存一年）。这是最常用的！
- public：表明响应可以被任何缓存（包括用户的浏览器、CDN节点、代理服务器等）缓存。
- private：表明响应只能被用户的浏览器缓存，中间的代理服务器不能存。
- no-cache：并不是“不缓存”的意思！而是说浏览器可以用本地缓存，但在用之前，必须先去服务器那里“打个招呼”（发送一个验证请求，比如带上If-None-Match或If-Modified-Since头部），问问服务器这个缓存还能不能用。如果服务器说“能用”（返回304 Not Modified状态码），浏览器才用缓存；否则就得下载新的。
- no-store：这才是真正的“雁过拔毛，不留痕迹”——完全禁止浏览器和任何中间缓存存储这个响应的任何部分。通常用于涉及敏感信息的页面。
ETag (实体标签) 与 Last-Modified (最后修改时间)： 这两位是Cache-Control: no-cache的“好搭档”，用来做缓存验证。
- Last-Modified：服务器告诉浏览器这个资源上次是啥时候改的。浏览器下次请求时会带上If-Modified-Since头部问：“这玩意儿从我上次看的时间点之后，你改过没？”
- ETag：服务器给资源生成的唯一“指纹”。浏览器下次请求时会带上If-None-Match头部问：“这资源的‘指纹’还是不是这个？”
如果服务器判断资源没变，就返回一个超轻量的304 Not Modified响应，告诉浏览器“放心用你本地的缓存吧！”，连文件本体都不用传了，是不是超省流量？

“咒语”怎么念？—— Nginx与Apache配置实例

通常，我们对不常变化的静态资源（图片、CSS、JS）设置较长的缓存时间。

Nginx配置示例 (在server块或特定location块中添加)：

location ~* \.(?:jpg|jpeg|gif|png|ico|css|js|svg|woff|woff2)$ {expires 30d; # 缓存30天 (这会自动添加Cache-Control: max-age和Expires头部)add_header Cache-Control "public, no-transform"; # 明确指定为public，并禁止代理服务器修改内容access_log off; # 可选：关闭这些静态资源的访问日志记录，减轻日志压力log_not_found off; # 可选：找不到这些静态资源时不记录错误日志
}

Apache配置示例 (需要启用mod_expires模块，通常在.htaccess文件或虚拟主机配置中添加)：

&lt;IfModule mod_expires.c&gt;ExpiresActive OnExpiresByType image/jpeg "access plus 1 month"ExpiresByType image/png "access plus 1 month"ExpiresByType image/gif "access plus 1 month"ExpiresByType image/ico "access plus 1 month"ExpiresByType text/css "access plus 1 month"ExpiresByType application/javascript "access plus 1 month"ExpiresByType application/x-javascript "access plus 1 month"ExpiresByType image/svg+xml "access plus 1 month"ExpiresByType application/font-woff "access plus 1 year"ExpiresByType application/font-woff2 "access plus 1 year"
&lt;/IfModule&gt;&lt;IfModule mod_headers.c&gt;&lt;FilesMatch "\.(jpe?g|png|gif|ico|css|js|svg|woff2?)$"&gt;Header set Cache-Control "public, max-age=2592000, no-transform"# max-age=2592000 秒约等于30天&lt;/FilesMatch&gt;
&lt;/IfModule&gt;

“旧貌换新颜”的难题：缓存更新（Cache Busting）

浏览器缓存虽好，但如果你的CSS或JS文件更新了，用户浏览器里还存着旧版本的缓存，那看到的可能就是“穿越”的样式或者出错的功能了。怎么让浏览器知道该去下载新文件呢？这就是“缓存破坏”或“缓存刷新”（Cache Busting）技术了。常见方法有：

文件名加版本号： 比如把style.css改成style.v1.2.css。文件名变了，浏览器自然会把它当成新资源去下载。很多前端构建工具会自动帮你做这个。
URL后加查询参数： 比如style.css?version=1.2。但要注意，有些代理服务器可能会忽略查询参数而继续提供旧缓存。所以文件名版本号通常更可靠。

第二重魔法：服务器端页面缓存 —— 给服务器“减负提神”

浏览器缓存主要针对的是静态资源，而且只对用户的“第二次访问”有效。那对于那些动态生成的页面（比如PHP程序从数据库里查出来的数据组成的页面），用户第一次访问时，服务器是不是还得辛辛苦苦地执行一遍PHP、查一遍数据库呢？如果这个页面内容不经常变，或者对于所有未登录用户看到的内容都一样，那我们能不能让服务器也“偷偷懒”，把第一次生成好的HTML页面“存个档”，下次再有用户访问同一个页面，直接把这个“存档”扔给他，省去中间那一堆复杂的计算过程呢？

当然可以！这就是服务器端页面缓存的魔力！ 它就像是餐厅把最畅销的几道菜提前做好一份“样板菜”放在保温箱里，有客人点这道菜，直接端上去，速度杠杠的！

常见的“施法”流派：

A. Web服务器自带“法术”（Nginx/Apache级别缓存）

Nginx FastCGI Cache (针对PHP-FPM等FastCGI应用)：

Nginx的fastcgi_cache模块是个非常强大的工具，能把PHP-FPM（或其他FastCGI应用）处理完的动态页面结果缓存起来。

简单配置步骤（在http块定义缓存路径和参数，在server块或location块中启用）：

1. 在nginx.conf的http块中定义缓存区域：

http {# ...其他http配置...fastcgi_cache_path /var/nginx/cache levels=1:2 keys_zone=MYAPPCACHE:100m inactive=60m max_size=10g;# /var/nginx/cache: 缓存文件存放路径，确保Nginx运行用户有权限读写# levels=1:2: 缓存目录层级结构# keys_zone=MYAPPCACHE:100m: 缓存键和元数据存放的共享内存区域名和大小# inactive=60m: 60分钟内未被访问的缓存将被清理# max_size=10g: 最大缓存空间fastcgi_cache_key "$scheme$request_method$host$request_uri"; # 定义缓存的唯一键fastcgi_ignore_headers Cache-Control Expires Set-Cookie; # 忽略这些来自后端的头部，自己控制缓存
}

2. 在处理PHP的location块中启用缓存：

location ~ \.php$ {# ...其他fastcgi配置...include fastcgi_params;fastcgi_pass unix:/run/php/php8.1-fpm.sock; # 你的PHP-FPM地址fastcgi_cache MYAPPCACHE; # 使用上面定义的缓存区域fastcgi_cache_valid 200 301 302 60m; # 对200,301,302状态码的响应缓存60分钟fastcgi_cache_valid any 1m; # 其他状态码缓存1分钟fastcgi_cache_use_stale error timeout invalid_header http_500 http_503; # 后端出错时可使用过期缓存fastcgi_cache_bypass $skip_cache; # 定义一些不走缓存的条件add_header X-Cache-Status $upstream_cache_status; # 在响应头里加个缓存状态，方便调试 (HIT, MISS, BYPASS, EXPIRED)
}

Apache mod_cache (配合mod_cache_disk或mod_cache_socache)：

Apache也有类似的缓存模块，比如mod_cache配合mod_cache_disk可以将内容缓存到磁盘。配置相对Nginx来说，在某些场景下可能稍显复杂一些，但也能实现类似效果。

需要在httpd.conf或虚拟主机配置中加载模块并进行配置：

&lt;IfModule mod_cache.c&gt;&lt;IfModule mod_cache_disk.c&gt;CacheEnable disk /CacheRoot "/var/cache/apache2/mod_cache_disk"CacheDirLevels 2CacheDirLength 1CacheDefaultExpire 3600  # 默认缓存1小时CacheMaxFileSize 1000000 # 最大缓存1MB的文件&lt;/IfModule&gt;
&lt;/IfModule&gt;

（注意：以上只是极简示例，实际生产环境配置会更复杂，需要仔细阅读官方文档并进行测试。）

B. 应用层缓存“法宝”（如WordPress缓存插件）

对于很多流行的CMS（内容管理系统）如WordPress，有大量优秀的缓存插件（如WP Rocket, LiteSpeed Cache, W3 Total Cache, WP Super Cache等）。它们通常更容易上手，点几下鼠标就能开启页面缓存（通常是生成静态HTML文件）、对象缓存（把数据库查询结果等缓存到内存，如Redis/Memcached）等功能。对于不太懂服务器配置的用户来说，这是个不错的选择。

C. 反向代理缓存“大神”（如Varnish Cache, 或Nginx自身）

更高级的玩法是使用专门的反向代理缓存服务器，比如大名鼎鼎的Varnish Cache。它部署在你的Web服务器前端，专门负责缓存和快速响应用户请求，性能极高。Nginx本身也可以配置为强大的反向代理缓存服务器，缓存来自后端应用服务器（比如Tomcat, Node.js应用）的响应。

“魔法失效”的时刻：缓存清除/失效（Cache Invalidation）

缓存虽好，但如果你的网站内容更新了（比如发了一篇新博客，改了一个产品价格），用户看到的还是旧的缓存内容，那可就麻烦了。所以，“如何让缓存及时失效并更新”就成了缓存策略中的核心难题之一（甚至被称为“计算机科学两大难题之一”，另一个是命名规范）。

常见的缓存清除策略有：

基于时间的失效： 就是我们前面配置的expires, max-age, fastcgi_cache_valid，到期自动失效。简单粗暴，但可能不够及时。
事件驱动的清除： 当内容更新时，主动触发一个动作去清除相关的缓存。比如，WordPress的缓存插件在你发布或修改文章后，会自动清除对应页面的缓存。对于Nginx FastCGI Cache，有一些第三方模块（如ngx_cache_purge）或脚本可以实现按需清除。

双重魔法叠加：浏览器缓存 + 服务器端缓存 = 效果拔群！

浏览器缓存和服务器端缓存并不是“二选一”的关系，它们完全可以（也应该）协同工作，发挥“1+1 > 2”的魔力！

服务器端页面缓存： 负责减轻你服务器的压力，让服务器能更快地响应那些可以被缓存的页面请求（尤其是对于第一次访问该页面的用户，或者缓存已过期的用户）。
浏览器缓存： 负责让用户的浏览器“记住”那些不常变的静态资源。当用户再次访问，或者访问使用了相同静态资源的其他页面时，直接从本地加载，连服务器都不用麻烦了，速度自然快上加快！

一个典型的流程可能是：用户请求页面 -> CDN（如果有）提供缓存 -> 服务器端缓存提供页面 -> 应用服务器动态生成页面 -> 浏览器缓存静态资源。

施展“缓存魔法”的小贴士：

静态资源大胆缓存： 图片、CSS、JS这些不常变的东西，尽管给它们设置超长的浏览器缓存时间（比如一年），然后用文件名版本号或查询参数来控制更新。
匿名用户页面重点缓存： 对于未登录用户看到的、内容基本一致的页面（如文章页、列表页），服务器端页面缓存的效果最好。
动态个性化内容慎重缓存： 对于包含用户私人信息（如购物车、已登录状态下的用户中心）的页面，服务器端页面缓存要非常小心，甚至不缓存，或者采用更复杂的“片段缓存”（ESI等）技术。
测试！测试！再测试！ 实施任何缓存策略后，务必彻底测试网站的各项功能，并通过浏览器开发者工具检查HTTP响应头，确认缓存规则是否按预期工作。
监控缓存命中率： 了解你的缓存到底有多大效果，命中率高不高，是持续优化的重要依据。

哇哦！是不是感觉“缓存”这个“魔法”也没那么遥不可及了？无论是让用户的浏览器“长点记性”，还是让你的服务器“学会偷懒”，核心目的都是为了让我们的网站像装了“飞行马靴”一样，轻盈、迅捷！虽然配置缓存可能需要你花点时间去研究和测试，但一旦调校得当，它给你的网站性能带来的提升，绝对会让你觉得“物超所值”！Hostol希望这篇“缓存魔法入门与实战”能为你打开一扇通往极致网站速度的大门。赶紧去给你的网站也施展一下这些“加速咒语”吧！