本文已参与「新人创作礼」活动，一起开启掘金创作之路。

在我的脑海中一提到前端和后端，基本上第一个出现的区别点就是：后端是跟数据库、服务器打交道的，前端是跟浏览器打交道的，一直以来都认为仅仅是以浏览器作分界，把这两部分的代码分离出来。

也就是说在我之前认为的前后端分离是，浏览器请求Web服务器返回静态资源，其中JS代码以Ajax方式请求后台的RSETful接口，接口返回JSON格式数据，页面解析JSON数据，通过Dom操作渲染页面，后端提供给Web的就是JSON格式的API接口，例如Spring Boot写接口，Vue.js使用Axios请求接口绑定数据来渲染页面，也就是下面叙述的半分离

半分离

那么意味着WEB工作流程是：

• 打开浏览器，加载基本资源，如CSS，JS等
• 发起一个Ajax请求再到服务端请求数据，同时展示Loading
• 得到 Json 格式的数据后再根据逻辑渲染出DOM字符串
• 将DOM字符串插入页面中web view渲染出DOM结构

优点也很明显：

• 前端不会嵌入任何后台代码，前端专注于页面的开发，不依赖于后端
• 后端可以用任何语言,技术和平台实现，遵循一个原则：只提供数据，不提供任何和界面表现有关的内容，换言之，后端提供的数据可以用于任何其他客户端
• 发现Bug能快速定位到是哪一方的问题

然而在这种模式下，还是存在明显的弊端

• 这些步骤都由用户所使用的设备中逐步执行，也就是说用户的设备性能联系的更紧
• JS大量冗余，在业务复杂的情况下，页面渲染部分的代码，将非常复杂
• 在接口返回的数据量比较大的情况下，渲染会十分慢
• SEO（ Search Engine Optimization，即搜索引擎优化）非常不方便，由于搜索引擎的爬虫无法爬下JS异步渲染的数据，导致这样的页面，SEO会存在一定的问题

所以这种分离方式还是依照硬体环境划分的前后端分离。

完全分离

在前后端彻底分离这一时期，前端的范围被扩展，Controller层也被认为属于前端的一部分。

在这一时期：

• 前端：负责View和Controller层
• 后端：只负责Model层，业务/数据处理等

而在半分离的Controller层还是掌握在后端开发手中，前端想要接管Controller层，就需要一个中间层Node.js，Node.js适合运用在高并发、I/O密集、少量业务逻辑的场景。更最重要的一点是，从后缀.js就可以发现，Node毕竟是一个JS的中间件，对于前端开发来说，语法上学习成本也比较低。

加了中间层Node.js意味着开发或者重构的成本增大，并且单凭传输时间上，就多了一层传输时间，但是在一些应用场景下这个中间层是能带来利大于弊的东西。

引入Node.js之后，重新划分一下前后端：

用Node.js来作为桥梁架接服务器端API有什么作用？

比如后端出于性能和别的原因，提供的接口所返回的数据格式也许不太适合前端直接使用，前端所需的排序功能、筛选功能，以及到了视图层的页面展现，也许都需要对接口所提供的数据进行二次处理，那么在数据量比较小的时候，对其做运算分组等操作，并无影响。但是当数据量大的时候，便会依赖浏览器性能，当客户端性能较查就会有明显的卡顿，因此增加Node中间层便是一种良好的解决方案。

另外，从性能角度来讲，请求一个页面，可能要响应很多个后端接口，请求变多了，自然速度就变慢了，采用Node作为中间层，将页面所需要的多个后端数据，直接在服务端阶段就拼装好，再统一返回给浏览器，会得到更好的性能。

此时Node.js的作用在MVC中相当于C（控制器）。Nodejs路由的实现逻辑是把前端静态页面代码当成字符串发送到客户端（例如浏览器），简单理解可以理解为路由是提供给客户端的一组API接口，只不过返回的数据是页面代码的字符串而已。

此时浏览器(webview)不再直接请求后端的API，而是：

• 浏览器请求服务器端的Node.js；
• Node.js再发起HTTP去请求接口；
• 接口依然原样API返回JSON给Node.js；
• Node.js收到JSON后再渲染出HTML页面；
• Node.js直接将HTML页面flush到浏览器；

这样，浏览器得到的就是普通的HTML页面，而不用再发Ajax去请求服务器了，例如在单页面应用中，经常会碰到首屏加载性能问题，这个时候如果接了中间层的话，那么我们可以把首屏渲染的任务交给Node.js去做，服务端渲染对页面进行拼接直出HTML字符串，可以大幅提高首屏渲染的时间，减少用户的等待时间。

其次对于单页面的SEO优化也是很好地处理方式，由于目前的Ajax并不被搜索百度等搜索引擎支持，所以如果想要得到爬虫的支持，那么t通过服务端渲染也是一种解决方法。

正常来讲，一个项目中如果开发PC端、mobile、app多端，会各自研发一套前端。其实对于这三端来说，大部分端业务逻辑是一样的。唯一区别就是交互展现逻辑不同，如果Controller层在后端手里，后端为了这些不同端页面展示逻辑，自己维护这些Controller，接口无法重用。 如果增加了Node.js层，每种客户端的界面展示逻辑只需要前端开发去维护Node中Controller层。在需求变更时，可以由前端自己专职维护，后端无需操心。前后端各司其职，后端专注自己的业务逻辑开发，前端专注产品效果开发。

当然Node.js还有其它作用，比如合并请求，异步并行，分批输出，大幅缩短请求时间的同时做到哪个HTML片段（每个片段是一个文件）先渲染完就输出展示，提升用户体验。

总结

对于程序而言，最重要的功能就是展现数据，而用户对于枯燥的数据缺乏耐心，所以程序（网页）从某种意义上来讲是为用户提供美观便捷的方式来操作数据，从最初的前后端结合模式来看，也说明了页面和数据其实是具有强关联性的，而前后端分离出现是应对在高速发展的互联网时代下复杂的业务需求，需要专业的人来做专业的事情，半分离时代其实已经解决了这个问题，而完全分离——引入Node，也是工作职能上重新定义前后端的范畴，把本该就前端控制的部分交由前端掌控。