【架构师养成】初识动静分离

​

今天，遇到了一个静态图片需要单独拿出来做 CDN 加速的需求，之前的方式是通过 API 接口请求图片路径后再进行渲染。

以前也听说过把图片等文件单独上传的 CDN 服务器，但是并没有实践过，正好了解下。

如下图，在一个网络请求开始到完成后，看到各个资源加载的耗时，这里是使用 CDN 后的耗时，非常之快。

​

网络请求耗时详情，Chrome F12 查看

这里，主要想讲讲以下三点：

1. 什么是动静分离？
2. 动静分离有什么用？
3. 怎么用？

一，什么是动静分离

一句话就是：静态不变的资源获取与动态资源分离开。

举例：

• 图片资源无需使用接口，直接访问路径（如存储在七牛云等图片服务器），可以使用 CDN 加速。
• HTML，CSS，JS 等文件亦可分离出系统单独访问。

 二，动静分离有什么用 

1. 提高服务的访问性能和可维护性
2. 良好的用户体验，说白了，访问就是快，秒开！（咳咳，某些时候太快并不好）

 三，怎么用

1. 将静态资源部署在 nginx 上，后台项目部署到应用服务器上，根据一定规则去请求 nginx 上的资源。
2. 直接将静态资源全部存放在CDN服务器上，包括 JS，CSS，HTML，图片 等等。（推荐）
3. 比如 mars-assets.qnssl.com/FspZJF8xgIz… 这个图片就使用了 CDN 加速。

注意事项：

• 我们使用的是原生接入 RN 来进行应用的开发，图片地址固定后，后端替换图片后图片不会立即刷新。

  • 原因：图片有 Http 缓存，可以参考 【 HTTP 缓存机制详解】 。
  • 解决方案：在请求的图片 url 后面增加时间戳即可解决，如：http://xxxx/xxx/xxx.png?t= timestrap

• 可能会增加项目开发成本，如各个图片的地址需要出一个详细的文档等。 

• 动静分离参考：

  • www.cnblogs.com/matengfei12… 
  • www.jianshu.com/p/74e935706…

• CDN 加速原理：

  • yq.aliyun.com/articles/61…