vue-前端渲染和后端渲染的区别

　　说前端渲染和后端渲染前，渲染这个概念可以理解成：将html+css代码进行解析，变成页面上肉眼看见的图形界面；其实渲染整个过程还是挺复杂，只要上述简单理解即可。

　　要开始说前端渲染和后端渲染了，那就得从早期的网页开发到目前流行的开发阶段的演变过程说起，主要分为3个阶段：

　　　　1. 后端时代（前后端不分离）

　　　　2. 前后端分离时代

　　　　3. 单页面富应用时代

一. 后端时代

　　相信后的小伙伴还学过JSP呢，现在想想不知道多久没碰这东西了。但在早期呢确实是用JSP做视图的展示的，看下图：

 

 　　看完这个图后，我再解释一下。在早期页面的生成，他是通过模板引擎来做到的，最典型的就是JSP了。页面上的动态数据获取是由服务端Java来实现的，最终在服务端渲染出了html，将其返回给页面。因此这种方式也叫做后端渲染，html的最终生成是在服务端，浏览器只是拿到这个页面而已。

　　那什么是后端路由呢？我们拿springmvc的流程来举例子，后端路由相当是HandlerMapping处理器映射器，请求URL过来，由映射器进行正则匹配然后找到处理器

二.前后端分离时代

　　在后端时代还在用JSP时，那时候弊端太多了，典型的是耦合度太高，后端人员任务重，前后端人员沟通不方便...

　　前后端分离 出现后，前后端开发进行一定的解耦，仅仅是降低耦合度，并不是0耦合。那是因为出现Ajax技术，才实现了前后端分离的萌芽，画个图吧：

 

 　　说这幅图前，还普及一下一个知识，现在前后都分离常见有两种模式：

　　　　1. 前端代码和后端代码都在同一个项目目录里面，该项目部署到一台服务器上

　　　　2. 前端代码和后端代码是在不同的项目目录里面，两个项目是分别独立运行的，互不相关，可部署在不同的服务器里。比如上面画的这个图就是属于该情况。一般项目的前端代码放在静态资源服务器上，后端代码放在API服务器或者说Web服务器上

　　说完这个小常识后，再来讲下这幅图。浏览器起初拿到的页面是不完整的，是没有数据渲染过的，因此还得借助ajax去请求api服务器获取数据，最终渲染出真正的一个html页面。浏览器ajax请求获取数据后，并浏览器自身渲染的过程，就叫做前端渲染，因为这个工作呢不再是由服务端来做了，已经交付给浏览器负责，说白点即JavaSript渲染，而不再是Java了

三.单页面富应用时代

　　单页面富应用在vue中的体现可以说是淋漓尽致了。但不说vue啊，说什么是单页面富应用？

　　单页面富应用是说在静态资源服务器上，只有一个html页面，一套css代码，一套JS代码；浏览器去拿到上述的全部资源，进行部分展示和使用，如果通过请求具体的其他URL，在同一个页面中进行另有一部分的展示和使用。

　　可能说得有点抽象，也不画图了，因为这个没啥可画的。还是细说一下。

　　1. 浏览器发送请求到静态资源服务器

　　2. 静态服务器返回一个html页面，一套css代码，一套JS代码，即全部的资源

　　3. 浏览器拿到全部的资源后，并不是全部使用上的。比如访问首页，那就从全部的资源中展示首页相关的html+css+js，当去访问订单，那就在同一个页面里面不刷新的情况下，展示订单相关的html+css+js

　　我们发现同一个页面里面，没有再次向静态服务器发送页面请求的情况下，做到了页面的变化。这取决于两点：

　　　　》开始时已经把全部资源获取了

　　　　》前端路由。正是因为有前端路由，我们才可以通过触发某个事件，在同一个页面内进行局部的页面变化。如果学过vue的话都知道，实际上是同一个页面里单单切换了其中的组件

　　单页面富应用有一个最大的好处是：只请求一次静态服务器，不需要多次请求页面了。不过对于前端人员来讲呢，实际上真不是一个html页面，本来写多少页面还是多少

　　做个总结：单页面富应用 是在 前后端分离基本基础上，加了前端路由这个东西。