一、写在前面

昨天百度三面，面试官问了这个问题，我也只是回答了大概，今天特地总结一下。

二、总结

2.1、两种渲染方式

后端渲染

互联网早期，用户使用浏览器浏览的都是一些没有复杂逻辑的、简单的页面，服务器
进程从数据库获取数据后，后端的程序在把HTML页面吐给前端之前，先把HTML页面
上的特定区域、特定符号，先用数据填充，将数据加载进来生成HTML，然后通过网络
传输到用户的浏览器中解析成可见的页面。

前端渲染

随着前端页面的复杂性提高，前端就不仅仅是普通的页面展示了，而可能添加了更多
功能性的组件，复杂性更大，另外，彼时ajax的兴起，使得业界就开始推崇前后端分
离的开发模式，即后端不提供完整的HTML页面，而是提供一些API使得前端可以获取
到JSON数据，然后前端拿到JSON数据之后再在前端进行HTML页面的拼接，然后展示
在浏览器上，这就是所谓的前端渲染。

这样前端就可以专注UI的开发，后端专注于逻辑的开发。代表是现在流行的SPA单页面应用，例如Vue、React框架，只需要后端给我们提供接口API，前端UI、交互等全在前端进行，前后端只需要约定接口。

2.2、前端渲染和后端渲染的路线

前端渲染的路线

1、请求一个html
2、服务器返回一个html
3、浏览器下载html里面的js/css文件
4、等待js文件下载完成
5、等待js加载并初始化完成
6、js代码终于可以运行，由js代码向后端请求数据
7、等待后端数据返回
8、将数据渲染到页面上

后端渲染路线

1、请求一个html
2、服务端请求数据(内网请求快)
3、服务端初始渲染（服务端性能，较快）
4、服务端返回已经有正确内容的html
5、客户端请求js/css文件
6、等待js文件下载完成
7、客户端把剩下一部分渲染完成（内容小，渲染快）

从后端渲染到前端渲染的变化

1、计算任务的转移
    原本由服务器执行的渲染任务转移给了客户端，这在大量用户访问的时候大大
    减轻后端的压力。让后端专注做后端应该做的事情，性能将大大提高，因为服务
    器做的事情确实减小了，而现在随着客户端软硬件的发展，也能处理好大多数的
    渲染工作了。
2、放弃前端权限
	将整个UI逻辑交给客户端以后，一些有经验有能力的用户可能会劫持UI，使得
	他们能够看到一些不该看到的界面。这似乎违反了安全的原则。但是“一切在前
	端谈安全都是耍流氓”，后端不能轻信一切从前端传来的数据，切记一定要做好
	过滤与验证。只要使用SSL、屏蔽XSS、后端不出漏洞，想伪造身份劫持App还是
	难以做到的。

2.3、后端渲染与前端渲染的优缺点对比

后端渲染的优缺点：

1、优点：
	o 前端耗时少，因为后端拼接完了html,不需要先下载一堆js和css后才能看到
	页面，浏览器只需要直接渲染出来。
	
	o 搜索引擎优化，因为在后端有完整的html页面，所以爬虫更容易爬取获得信
	息，更有利于SEO。
	
	o 无需占用客户端资源。即解析模板的工作完全交由后端来做，客户端只要解析
	标准的HTML页面即可，这样对于客户端的资源占用更少，尤其是移动端，也可
	以更省电
	
	o 后端生成静态化文件。即生成缓存片段，这样就可以减少数据库查询浪费的时
	间了，且对于数据变化不大的页面非常高效

2、缺点
	o 不利于前后端分离，开发效率低。使用服务器端渲染，则无法进行分工合作，
	则对于前端复杂度高的项目，不利于项目高效开发。
	
	o 服务器端渲染，则前端一般就是写一个静态HTML文件，然后后端再修改为模
	板，这样是非常低效的，并且还常常需要前后端共同完成修改的动作。
	
	o 如果后端改了模板，前端还需要根据改动的模板再调节CSS，这样使得前后端
	联调的时间增加。
	
	o 占用服务器端资源，即服务器端完成HTML模板的解析，如果请求较多，会对
	服务器造成一定的访问压力。而如果使用前端渲染，就是把这些解析的压力分摊
	了前端，而这里确实完全交给了一个服务器.

前端渲染优缺点

优点:
	o 前后端分离，前端专注于前端UI，后端专注于API开发，且前端有更多的选择
	性，而不需要遵循后端特定的模板
	
	o 体验更好，比如，我们将网站做成单页Web应用（single page web 
	application，SPA，是加载单个HTML 页面并在用户与应用程序交互时动态更
	新该页面的Web应用程序）或者部分内容做成SPA，这样，尤其是移动端，可以
	使体验更接近于原生APP
	
	o 局部刷新，无需每次都进行完整页面请求
	
	o 懒加载，如在页面初始时只加载可视区域内的数据，滚动后再加载其它数据，
	可以通过 react-lazyload 实现
	
	o 富交互，使用 JS 实现各种酷炫效果
	
	o 节约服务器成本，省电省钱，JS 支持 CDN 部署，且部署极其简单，只需要
	服务器支持静态文件即可。

缺点：
	o 前端响应较慢，如果是客户端渲染，前端还要进行拼接字符串的过程，需要耗
	费额外的时间，不如服务器端渲染速度快。
	
	o 不利于SEO，目前比如百度、谷歌的爬虫对于SPA都是不认的，只是记录了一
	个页面，所以SEO很差.

2.4、使用场景

 不谈业务场景而盲目选择使用何种渲染方式都是耍流氓。比如企业级网站，主要功
 能是展示而没有复杂的交互，并且需要良好的SEO，则这时我们就需要使用后端渲
 染；而类似后台管理页面，交互性比较强，不需要SEO的考虑，那么就可以使用前端
 渲染。
 
 另外，具体使用何种渲染方法并不是绝对的，比如现在一些网站采用了首屏后端渲
 染，即对于用户最开始打开的那个页面采用的是后端渲染，这样就保证了渲染速
 度，而其他的页面采用前端渲染，这样就完成了前后端分离。   

2.5、为什么前端渲染不利于SEO

前端渲染我们就以单页面应用程序SPA来说，我们一般使用ajax来异步获取数据并且展示。
下面时后端渲染爬虫看到的页面

可以看到一个完整的html页面。
前端渲染爬虫看到的页面是这样的