前端渲染与后端渲染

1.后端渲染（服务器端渲染）：
语言：jsp(java server page)/php

端数：两端开发（浏览器+服务器）

过程：当用户对浏览器请求一个地址时，比如https://space.bilibili.com/，这个url=https://space.bilibili.com/，我们可以暂时称其为url1，url1请求的地址到达服务器之后，服务器会自己进行判断，原来这次请求是请求这个url1的地址，对url1进行解析，通过后台有一种jsp的技术会把你的网页给你写好，言而总之：就是你的网页已经在服务器端进行写好，用户请求的地址，就直接把整个网页丢给用户的一种开发模式，刚刚提的后台就是由html+css+java来进行链接的，Java用来连接数据库的，实现数据库的增删改查功能，读取数据并且动态地放在页面中。当服务器传到浏览器的时候，网页上就只有html+css

当用户请求url2=https://space.bilibili.com/guichuqu，也是同一个道理，先判断，再解析，拿资源，渲染页面

问：那服务器是怎么进行判断的呢？
答：服务器与浏览器存在映射表，就像路由器与每个用户之间都存在映射表一样

优点:
1.用户根据不同的路径请求不同的内容，交给服务器进行处理，服务器渲染好了整个页面，并且返回给用户
2.不需要单独的加载js+css，可以直接加给浏览器进行使用，有利于seo的优化

缺点：
1.整个页面都是后端人员进行维护，编写的
2.前端人员如果想给页面进行开发的话，需要额外地学习php或者Java的语言进行编写页面代码
3.html的代码与数据逻辑的代码混在一起，编写维护都是很费时间的工作

2.前后端分离阶段：
原因：为啥会出现这个阶段呢？原来是ajax的出现

端数：三端开发（浏览器+静态资源服务器+api接口服务器）

简要概述：后端只负责数据处理以及提供数据，不负责任务阶段的任务，后端只负责api接口服务器与数据库的链接

过程：当用户输入一个url的地址，比如https://space.bilibili.com/，原来会先到静态资源服务器拿到对应映射表中的html+css+js的代码，没错js也是放在静态资源服务器的。然后直接对页面进行渲染展示，js代码的展示是由浏览器帮我们执行的，当我们使用ajax对api接口服务器进行网络请求的话，这时候我们才会调用api接口服务器的资源，比如$.ajax({url:'127.0.0.1/api/login',success:function(){})，对api接口进行网络请求，这时候到的资源比如list:[十万条数据],这时候是由其他的js代码进行执行的，比如：进行list创建大量的div标签，这就是前后端分离的全过程

优点：前后端人员各司其职，前端专注于交互和可视化，后端专注于数据，并且一套api接口可以供给多个端进行数据的使用：ios，android，网页，app等

缺点：静态资源服务器有多套的html+css+js，比如/home是一套html+css+js，/login是一套html+css+js

3.单页面富应用阶段（SPA页面）
其实是SPA(single page web application)阶段
特点：
1.在前后端分离阶段的基础上+前端路由
2.静态资源服务器只有一套的index.html,css,js
端数：三端开发（浏览器+静态资源服务器+api接口服务器）
过程：当用户输入一个url的地址，比如https://space.bilibili.com/，会先到静态资源服务器拿到所有全部的静态资源，放在浏览器上，（问：一下请求所有资源不会卡顿吗？ 答：通过异步执行来请求，而且大部分的资源是到了浏览器而不执行，就存放在浏览器中的），比如我页面有三个button,点击不同的button，请求不同的内容，这时候，我们是通过前端路由进行配置的，比如我请求api/home,前端路由就会进行跳转（因为一开始我们就把所有的资源请求下来了）,跳转到api/home的页面，比如我请求api/login,前端路由就会进行跳转,跳转到api/login的页面,言而总之：url --页面有对应的映射表与映射关系，都是通过前端进行管理，对于Vue来说就是一个url对应一个组件

优点：减少服务器的压力，不用每请求一个页面都要到静态资源服务器发一次请求