随着用户流量增长，传统前后端交互面临压力，本文探讨了前后端分离的优势，如解耦、CDN加速、并行开发等，并详细介绍了交互优化步骤，包括请求类型约定、接口文档、特殊请求方式等。同时，提出了性能优化策略，如使用Get/Post请求、CDN加速、数据分批获取、服务端缓存和文件转发。通过实例分析，展示了如何通过压缩技术优化大数据量传输，有效减少了请求时间和数据大小。
分布式架构 前后端交互优化 上篇
传统前后端交互结构如下：
如图所示前后端耦合一起，交互方式http+jsp+js，静态资源和业务代码统一存放同工程，同台服务器部署，服务器接收到浏览器的请求后，进行业务处理返回页面，页面渲染，最终返回给浏览器
用户流量增加后存在以下问题
- 页面和业务逻辑同工程，分解压力变小
- 同服务器部署，服务器性能有瓶颈
- jsp页面获取数据后需要编译，性能差
- 无法横向扩展，不支持高可用
- 页面渲染速度缓慢，用户体验差
由于传统交互结构不能满足用户体验，需要重新定义前后端交互方式
采用前后端分离方式 (h5+http json) 交互可提高用户体验
结构视图如下：
如图所示，前后端分离优势如下：
- 前后端解耦，分开部署编译打包
- h5静态页面存放cdn加速渲染
- h5可部署多份，负载均衡
- h5和后端可并行开发，mock数据 提高开发效率
- h5可打包、拆包、压缩容量，提供轻量级
- 服务端专注于数据处理返回
很多互联网公司为了提高页面渲染速度，从传统前后端交互脱离 变为 前后端分离交互方式，可见这是一种趋势。
前后端分离交互步骤如下
- 目前主流前端框架（vue、react、angular）和后端约定数据传输格式 如（json、xml）
- 约定请求类型（POST、GET）、请求入参、请求出参
- 可提前书写接口文档或 引入Swagger自动生成接口文档
- 针对特
最低0.47元/天 解锁文章
扫一扫
710
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
