动静分离是高并发系统中见效快、实施成本低的关键优化手段，核心是将图片、js、css等静态资源从后端剥离，交由nginx、对象存储或cdn处理，使后端专注动态逻辑，并配合缓存策略与开发适配提升整体性能。
动静分离是高并发系统中见效快、实施成本低的关键优化手段之一。它的核心思路很直接：不让后端服务器干不该干的活——比如反复传输图片、JS、CSS 这类几乎不变的文件。
把静态资源从后端剥离出来
后端应用（如 Spring Boot、Django、Node.js）原本既要处理登录、下单等动态逻辑，又要响应 HTML 页面、图标、样式表等静态请求。这不仅浪费 CPU 和 I/O，还挤占连接数和线程资源。动静分离就是把这类资源抽离出去，由更擅长处理静态内容的组件来服务：
- 用 Nginx 直接托管静态文件（推荐入门方案），配置 location 规则拦截 /static/、/img/、/.js 等路径，直接返回磁盘或内存中的文件，不转发给后端
- 将静态资源上传到对象存储（如阿里云 OSS、腾讯云 COS），再通过独立域名（如 static.example.com）访问，彻底绕过业务服务器
- 进一步结合 CDN，让资源缓存在离用户更近的边缘节点，降低回源率，提升首屏加载速度
让后端只专注动态逻辑
剥离静态压力后，后端服务器能更稳定地响应 API 请求。此时可做几项关键调整：
- 关闭 Web 容器（如 Tomcat）对静态资源的自动处理能力，避免重复解析和路径匹配开销
- 前端构建产物（如 Vue/React 打包后的 dist 目录）不再部署在后端工程里，而是单独发布到静态服务层
- 后端接口全面 JSON 化，不再渲染 HTML 模板，减少序列化与视图渲染耗时
配合缓存策略放大效果
光是分离还不够，要让静态资源“少来几次”。Nginx 层可设置强缓存头：
- 对 .js、.css、.png 等资源配置 Cache-Control: public, max-age=31536000（一年），利用浏览器长效缓存
- 对 HTML 文件使用协商缓存（ETag / Last-Modified），确保内容更新后能及时刷新
- 资源加哈希指纹（如 app.a1b2c3.js），实现“内容变、URL 变”，放心设永久缓存
注意几个实际影响点
动静分离不是一配了之，需关注落地细节：
- 前后端跨域问题：静态资源走 static.example.com，API 走 api.example.com，需配置 CORS 或反向代理透传
- SEO 风险：纯前端渲染（CSR）页面可能被搜索引擎抓取困难，建议服务端渲染（SSR）或预渲染（Prerender）补位
- 开发联调便利性：本地开发时可用 Nginx 同步代理静态资源和后端，保持与生产一致的请求路径
