动静分离的核心逻辑，是让静态文件不再回源站折腾，直接由边缘节点或独立静态服务器响应，源站只处理动态请求，这样源站压力能明显下降，用户访问速度也会更快。
动静分离为什么能把源站压力降下来
一个网页通常由两部分内容组成：一部分是长期不变的静态资源，比如图片、CSS、JavaScript、字体文件、视频；另一部分是实时变化的动态内容，比如用户信息、购物车、搜索结果、订单状态。
传统架构里，浏览器访问一个页面，所有请求都会打到源站，源站既要读数据库生成动态HTML，又要反复输出同一张logo图片、同一个CSS文件，源站的CPU、内存、带宽被大量重复的静态文件请求吃掉,动态请求反而得不到及时处理。
动静分离的作用，就是把这部分重复劳动剥离出去，静态文件被放到独立通道上，由缓存节点或独立服务器直接响应，源站只接动态请求，源站不再被静态IO拖累,压力自然就降下来了。
静态资源和动态请求的本质区别
- 静态资源：图片、CSS、JS、字体、视频、安装包等，变化频率低，可以长时间缓存,用户之间访问的内容完全一样。
- 动态请求：登录状态、购物车、搜索结果、API返回、个性化推荐等，每个用户看到的内容不同,必须实时计算。
静态资源适合“一次生成，多次复用”，把这类请求全部压给源站，等于让厨房师傅每次都要现切土豆,而不是用提前备好的半成品。
动静分离如何同时提升速度
静态文件从离用户更近的节点响应，网络延迟会明显降低，源站不再被静态请求占满带宽，动态请求的响应时间也会缩短，独立静态域名还能让浏览器开启更多并发连接,页面整体加载速度会更快。
网站动静分离怎么做：从梳理到上线的完整步骤
落地动静分离并不复杂,但需要按顺序把几个环节都做扎实。
第一步：识别静态资源
打开浏览器开发者工具，切到Network面板，刷新页面，按类型排序，把扩展名为jpg、png、gif、css、js、woff2
、svg的请求全部记录下来,这些就是要分离出去的静态资源。
第二步：选择承载方式
根据网站规模和预算,常见有三种做法：
- 对象存储加CDN：适合图片视频多、流量较大的站点，静态文件上传到对象存储，CDN自动缓存,用户就近访问。
- 独立静态服务器：适合预算有限、资源量不大的情况，租用一台轻量服务器专门放静态文件,源站只跑动态应用。
- 同一台服务器用Nginx分离目录：适合小站点或测试环境，不增加额外成本，但源站仍然承担静态带宽,降压效果有限。
在国内服务器动静分离方案里，对象存储的地域选择很关键，北京的用户就选北京节点，上海的用户选上海节点,避免跨地域回源带来的额外延迟和流量费用。
第三步：迁移静态资源
把整理好的静态文件上传到对象存储或独立静态服务器，保持原有目录结构，命令行工具可以批量上传，也可以使用云厂商提供的同步工具，迁移完成后，先在浏览器里直接访问静态文件URL,确认可以正常打开。
第四步：改写资源URL
有两种方法把页面里的静态资源地址指向新通道：
- 直接改代码：把模板和样式表里的图片路径、CSS路径改为绝对URL，比如
https://static.example.com/css/main.css。 - Nginx重写规则：如果不想动代码，可以在源站Nginx上增加重写规则,把原来的静态路径301重定向到新域名。
直接改代码更彻底，也便于长期维护,重写规则适合临时过渡。
第五步：配置缓存策略
静态资源必须配合合理的缓存头，否则浏览器每次都要重新验证，动静分离的效果会打折扣，对于带版本号的文件,可以设置一年的缓存时间：
Cache-Control: public, max-age=31536000, immutable不带版本号的文件，设置较短的缓存时间,并保留ETag用于协商缓存：
Cache-Control: public, max-age=86400第六步：验证效果
用curl -I查看响应头，确认Cache-Control、Expires、ETag
都正确，再打开浏览器开发者工具，观察静态资源的响应来源,确认不再是源站IP。
nginx动静分离配置教程：匹配规则与缓存策略
Nginx是目前最常用的动静分离实现工具,下面是一段典型的配置示例：
server {
listen 80;
server_name www.example.com;
root /var/www/html;
location ~ .(jpg|jpeg|png|gif|css|js|ico|woff2?|svg)$ {
root /data/static;
expires 30d;
add_header Cache-Control "public, max-age=2592000, immutable";
access_log off;
try_files $uri =404;
}
location / {
proxy_pass http://127.0.0.1:8080;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
这个配置里，location ~匹配所有常见的静态文件扩展名，不区分大小写，匹配到静态请求后，root /data/static会把请求指向独立静态目录，expires 30d设置浏览器缓存有效期，add_header补充缓存控制头，access_log off关闭静态请求日志,减少磁盘IO。
剩下的location /负责把动态请求转发给后端应用，proxy_pass指向本机8080端口的应用服务，比如Node.js、Java或PHP-FPM。
如果静态资源已经迁到独立域名或CDN，源站Nginx就不需要配置静态location,只需保留动态代理部分即可。
动静分离和cdn的区别，以及什么时候该一起用
这是两个经常被混在一起的概念,但本质上不一样。
- 动静分离：是一种架构策略，核心是“把静态和动态请求分开处理”，它可以用Nginx实现，可以用独立服务器实现,也可以借助对象存储。
- CDN：是一种网络服务，核心是“把内容缓存到离用户更近的节点”，CDN可以加速静态资源,也可以做动态加速。
两者的关系更像是配合，而不是替代，很多情况下，动静分离是CDN应用的前提，先把静态资源独立出来，CDN才能高效地缓存和分发这些资源，如果静态资源还混在源站的动态请求里，CDN的回源策略会变得复杂,缓存命中率也会下降。
一个常见的组合是：静态资源对象存储，套一层CDN；动态请求源站直出或走CDN的动态加速通道，这样既能降低源站压力,又能让静态加载速度最大化。
常见场景：WordPress和个人博客的动静分离方案
WordPress站点通常图片较多，而源站带宽往往不大，一张高清原图可能有两三MB,十几个用户同时访问就能把1M或3M的小带宽打满。
WordPress动静分离的典型做法是：用对象存储插件把媒体库文件自动同步到云端，并替换文章里的图片URL为CDN域名，这样源站只负责生成页面HTML，图片加载全部走CDN，再配合缓存插件生成静态HTML,源站压力可以进一步降低。
个人博客的动静分离重点在图片和主题静态资源，把CSS、JS、图片全部迁到对象存储，源站只跑PHP和数据库，国内服务器动静分离方案中，如果源站带宽小、图片多，这一步带来的体验提升非常明显，对象存储的流量费用通常不高，多数云厂商还有免费额度,对个人用户来说成本几乎可以忽略。
关于动静分离的常见问题
动静分离能提升多少速度
这个取决于用户地理位置、源站带宽和静态资源体积，多数情况下，静态资源加载时间会明显缩短，尤其是图片较多、用户离源站较远的站点，行业共识认为，静态资源命中缓存后，用户感知的首屏时间会有可观的改善,但具体数值因站点而异。
动静分离和CDN的区别是什么，有必要都上吗
动静分离是架构思路，CDN是加速服务，小站点可以只用Nginx做动静分离，不额外购买CDN；中大流量站点建议配合CDN使用，因为CDN的节点数量多,用户就近访问的效果更稳定。
个人博客有必要做动静分离吗
如果源站带宽小、图片多，就有必要，个人博客的图片通常是最耗带宽的部分，把图片分离到对象存储后，源站只处理文章页请求，1M带宽也能跑得比较流畅，对象存储流量费用不高,多数云厂商会提供一定的免费额度。
动静分离不是一次性工程，而是一项需要长期维护的策略，静态资源的版本管理、缓存失效、命中率监控，都要持续跟进，把静态和动态彻底分开，源站才能轻装上阵,用户体验也才能稳得住。
首发原创文章，作者：王坚，如若转载，请注明出处：https://idctop.com/article/646279.html
