【vue】浅谈前后端渲染（网页的发展历程）

嗨嗨，醒醒，起来写代码啦！

web前端不仅是一门技术，更像是一门艺术，成为的越来越多程序猿的理想职业，今天，我们站在渲染的角度来聊聊web前端经历的几个阶段。

一、 后端渲染阶段

• 优点：因为不需要加载任何的js和css，所以对SEO优化要好一点
• 缺点：整个页面的模块由后端人员来编写和维护的，前端开发人员如果要开发页面，需要通过java等语言来编写页面代码，html代码和数据以及对应的逻辑会混在一起，编写和维护都是很糟糕的事情
• 大体过程：在浏览器输入url后，url传到后端服务器，服务器收到这个url，使用例如jsp技术将这个url对应的html+css+java代码（用处：从数据库获取数据，然后动态的展示到页面上），然后服务器将html+css传到浏览器，也就是说服务器直接生产渲染好对应的HTML页面，返回给客户端展示。界面是在后端已经渲染好了，这个时期称为后端渲染阶段

二、前后端分离一阶段（无前端路由）

• 优点：后端只负责提供数据，不负责任何界面的内容，前后端责任清晰，后端专注数据，前端专注交互和可视化。另外，后端可复用，比如京东的网页端，手机端访问的是同一个api服务器
• 角色：API服务器、静态资源服务器、浏览器（很多公司会把前二者放在一个服务器上）
• 过程：在浏览器输入url，去静态资源服务器将html+css+js取出来后，浏览器将html+css渲染出来，然后执行js，比如执行了一个$.ajax,在js执行时,去API服务器取到数据，然后执行其他的js，将数据插入到标签中进行展示，这样，浏览器显示的网页中的大部分内容，都是由前端写的js代码在浏览器中执行的，最终渲染出来的网页，称为前端渲染
  

三、前后端分离二阶段\SPA阶段（有前端路由）

• 特点：静态资源服务器中只有一个html+css+js
• 优点：后端只负责提供数据，不负责任何界面的内容，前后端责任清晰，后端专注数据，前端专注交互和可视化。另外，后端可复用，比如京东的网页端，手机端访问的是同一个api服务器
• 角色：API服务器、静态资源服务器、浏览器（很多公司会把前二者放在一个服务器上）
• 过程：在浏览器输入url，去静态资源服务器将这一个html+css+js(全部资源)取出来，之后浏览器不会将html+css全部渲染出来， 而是遇到事件比如当点击“首页”时，浏览器使用一个技术将首页对应的js抽取出来然后渲染。这个技术就是前端路由。
• 前端路由：里边配置了一些映射关系，即url和对应的组件，当url发生改变时，首先要找该路由，然后才能找到相应的组件，进而渲染出来
• 前端路由核心：因为不重新向服务器请求资源，所以页面不刷新（配置路由的时候有两种模式1、hash 2、history）
• 实现方法：
• （一）(默认)url的hash：location.lash = aaa;这时浏览器上方的网址输入框中最后拼接了aaa（查看network里，并没有请求新的资源（js，css等）。如果改href就会刷新）。hash改变后，会查看vuerouter，找到对应的组件，然后将其取出来渲染
• （二）html5的history的pushstate：history.pushState({},’’,.‘home’);这种方法使用的是一种栈结构。pushState和back（或者浏览器的后退按钮）；
• （三）html5的history的replaceState：history.replaceState({},’’,.‘home’);不能返回
• （四）go，需要用pushstate方法才行，go(-1) = back go(1) = forward