深入浅出：了解前后端分离优势、前后端接口联调以及优化问题
深入浅出：了解前后端分离优势、前后端接口联调以及优化问题
目录：
2. 前后端接口联调；
3.前端性能优化 ；
4.前端安全问题；
一、项目有前后端分离和前后端不分离：
在前后端不分离架构中，所有的静态资源和业务代码统一部署在同一台服务器上。服务器接收到浏览器的请求后，进行处理得到数据，然后将数据填充到静态页面中，最终返回给浏览器。
实现前后端分离后，有了下面几点改变：
1.服务器一分为二，前后端分别部署，静态资源放在前端服务器，业务代码放在后的服务器
2.前端服务器需要接收Http请求（一般使用node.js）
3.前端服务器需要进行视图解析（可以使用vue.js、angular.js）
4.前端服务器需要处理路由（也就是页面之间的跳转逻辑）
5.后端服务器只需要返回数据
一、前言
前后端分离已成为互联网项目开发的业界标准使用方式，通过nginx+tomcat的方式（也可以中间加一个nodejs）有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。这个步骤是系统架构从猿进化成人的必经之路。
核心思想是前端html页面通过ajax调用后端的restuful api接口并使用json数据进行交互。
在互联网架构中，名词解释：
Web服务器：一般指像nginx，apache这类的服务器，他们一般只能解析静态资源。
应用服务器：一般指像tomcat，jetty，resin这类的服务器可以解析动态资源也可以解析静态资源，但解析静态资源的能力没有web服务器好。
二、技术分工（开发人员分离）
以前的JavaWeb项目大多数都是java程序员又当爹又当妈，又搞前端，又搞后端。
随着时代的发展，渐渐的许多大中小公司开始把前后端的界限分的越来越明确，前端工程师只管前端的事情，后端工程师只管后端的事情。正所谓术业有专攻，一个人如果什么都会，那么他毕竟什么都不精。大中型公司需要专业人才，小公司需要全才，但是对于个人职业发展来说，我建议是分开。
1、对于后端java工程师：（负责Model层，业务处理/数据等）
把精力放在java基础，设计模式，jvm原理，spring+springmvc原理及源码，linux，mysql事务隔离与锁机制，mongodb，http/tcp，多线程，分布式架构，弹性计算架构，微服务架构，java性能优化，以及相关的项目管理等等。
后端追求的是：三高（高并发，高可用，高性能），安全，存储，业务等等。
2、对于前端工程师：（负责View和Controller层。）
把精力放在html5，css3，jquery，angularjs，bootstrap，reactjs，vuejs，webpack，less/sass，gulp，nodejs，Google V8引擎，javascript多线程，模块化，面向切面编程，设计模式，浏览器兼容性，性能优化等等。
前端追求的是：页面表现，速度流畅，兼容性，用户体验等等。
术业有专攻，这样你的核心竞争力才会越来越高，正所谓你往生活中投入什么，生活就会反馈给你什么。并且两端的发展都越来越高深，你想什么都会，那你毕竟什么都不精。
通过将team分成前后端team，让两边的工程师更加专注各自的领域，独立治理，然后构建出一个全栈式的精益求精的team。
三、开发模式
以前老的方式是：
产品经历/领导/客户提出需求===》UI做出设计图 ===》前端工程师做html页面===》后端工程师将html页面套成jsp页面（前后端强依赖，后端必须要等前端的html做好才能套jsp。如果html发生变更，就更痛了，开发效率低）===》集成出现问题 ===》前端返工 ===》后端返工===》二次集成 ===》集成成功 ==》交付
新的方式是：
产品经历/领导/客户提出需===》UI做出设计图 ===》前后端约定接口&数据&参数 ===》前后端并行开发（无强依赖，可前后端并行开发，如果需求变更，只要接口&参数不变，就不用两边都修改代码，开发效率高）===》前后端集成 ===》前端页面调整 ===》集成成功 ===》交付
四、请求方式
原文：https://blog.csdn.net/bntX2jSQfEHy7/article/details/80589580
二、前后端接口联调：
前言：
以JC同事为例，他公司为前后端分离架构，前端vue全家桶；前后端人员开会协商数据接口后(主要是定义传输的数据和API接口)，前后端并行开发；因为后台此时无法提供后端数据，所以前端需要用mock模拟假数据，管理API接口，获取数据，到时接口联调时连接后端服务器，访问后端数据即可。
仔细看看这其实就是前后端分离中的mock数据和联调的问题，就现在来说能解决的方式有很多种。先说mock数据，gulp，webpack， fekit （去哪儿网的一款前端自动化构建工具，据说历史比webpack和gulp都要久远）等等自动化构建工具都有mock数据的功能，这不是问题；再说绝对路径的问题，其实只需要做一个host的映射就行了。
之前开发写代码的时候，所有的ajax数据都不是后端返回的真实数据，而是我们自己通过接口mock模拟的假数据，当前端的代码编写完毕，后端的接口也已经写好之后，我们就需要把mock数据干掉，尝试使用后端提供的数据，进行前后端的一个调试，这个过程我们就把它称之为前后端的接口联调。
为什么要联调 本地的mock数据是JC同事自己写的，肯定符合前端需求，但是后端接口首先需要测试通不通，还需要测试数据格式对不对，还有后端有没有填写足够的数据，比如写列表页，前端想分页，如果后端就写了两条测试数据，你咋整？ 所以，Jack需要根据后端对接口的调整，不断地来回切换url，这样岂不是还在受后端的影响，还谈什么毛线的前后端分离，名存实亡嘛！
当我的朋友Jack把static文件夹下的mock数据删除之后，在运行项目，发现报错了，浏览器告诉他，你访问的mock下面的index.json文件找不到404。
我们平时本地前端开发环境dev地址大多是 localhost:8080，而后台服务器的访问地址就有很多种情况了，比如 后端程序猿本地IP（127.0.0.1:8889），或者外网域名，当前端与后台进行数据交互时，自然就出现跨域问题（后台服务没做处理情况下）。axios不支持jsonp, 所以我们就要使用http-proxy-middleware中间件做代理。
https://www.douban.com/note/686499733/?type=rec#sep
三、前端性能优化
1.内容优化
(1)减少HTTP请求数
(3)避免重定向
(4)使用Ajax缓存
(5)延迟加载组件,预加载组件
(6)减少DOM元素数量
(7)避免404
2.服务器优化
(1)使用内容分发网络（CDN）：把网站内容分散到多个、处于不同地域位置的服务器上可以加快下载速度。
(2)GZIP压缩
(3)设置ETag：ETags（Entity tags，实体标签）是web服务器和浏览器用于判断浏览器缓存中的内容和服务器中的原始内容是否匹配的一种机制。
(4)提前刷新缓冲区
(5)对Ajax请求使用GET方法
(6)避免空的图像src
3.Cookie优化
(1)减小Cookie大小
(2)针对Web组件使用域名无关的Cookie
4.CSS优化
1)将CSS代码放在HTML页面的顶部
2)避免使用CSS表达式
(3)使用<link>来代替@import
(4)避免使用Filters
5.javascript优化
(1)将JavaScript脚本放在页面的底部。
(2)将JavaScript和CSS作为外部文件来引用：在实际应用中使用外部文件可以提高页面速度，因为JavaScript和CSS文件都能在浏览器中产生缓存。
(3)缩小JavaScript和CSS
(4)删除重复的脚本
(5)最小化DOM的访问：使用JavaScript访问DOM元素比较慢。
(6)开发智能的事件处理程序
(7)javascript代码注意：谨慎使用with,避免使用eval Function函数,减少作用域链查找。
6.图像优化
(1)优化图片大小
(2)通过CSS Sprites优化图片
(3)不要在HTML中使用缩放图片
(4)favicon.ico要小而且可缓存
四、前端安全问题
1.算法加密：
(1) RSA加密
(2) MD5加密
(3) SHA256加密