一文搞懂什么是前端渲染和后端渲染以及两者的区别

约定不等于承诺〃 2023-10-01 23:30 24阅读 0赞

**一、什么是后端渲染？**  
我们都知道现在的网页都由html+css+js组成，但是在比较早的时候是没有js(JavaScript)的。所以那时候网页开发一般都是用html+css+jsp(java server page)/php来开发。  
当我们从浏览器输入一个url的时候，浏览器会将我们输入的url发送到服务器上。当服务器拿到这个url的时候，服务器会进行解析，然后在后台生成一个包含html+css+js+jsp的网页。这时候服务器端就已经生成一个最终的网页了，网页在服务端渲染好之后，就会把渲染好的网页(包括html+css+数据)直接传给浏览器去显示在用户的电脑上了,这就是后端渲染,也叫服务端渲染。  
**一句话总结后端渲染**：网页全部在服务端渲染完成，再返回给浏览器，浏览器只起到用来展示页面的作用，并没有参与到页面渲染的工作中来。

**二、什么是前端渲染呢？**  
在明白我们所说的后端渲染之后，其实大家很容易就能想到前端渲染是什么样的。

在经历过比较早的阶段之后，随着Ajax的出现，就开始有了我们的前后端分离的阶段。前后端分离意思就是，后端只干我后端该干的活——提供数据，前端只干我前端该干的活——根据后端提供的数据进行页面可视化和页面交互等等。不像以前前后端不分离的时候，前端需要懂后端知识，写一点后端代码，后端也需要懂前端知识，写一些前端代码等等，这样分工及其不明确，代码后期维护也会相当麻烦。

言归正传，在前后端分离的项目中，后端程序员只需要依据和前端程序员约定好的API来返回数据，前端程序员通过如Ajax等方式来获取数据，并通过js（JavaScript）将数据渲染到页面中即可。举个例子，当我们从浏览器输入一个url的时候，浏览器会将我们输入的url发送到服务器上，从静态资源服务器上获取html+css+js+png等等这些静态资源，此时我们的客户端即我们的浏览器就通过Ajax请求去向后端请求数据，后端的服务器接收到请求后只需要将前端需要的数据返回，不必再承担页面渲染的工作，而浏览器接收到后端传回的数据后再通过js来进行页面动态渲染，局部刷新页面，这就是我们的所说的前端渲染。

**一句话总结前端渲染**：后端只需向前端提供它所需的数据，然后前端浏览器依靠获取的数据，利用js进行页面渲染，最终显示在用户的电脑上。即页面渲染工作由前端浏览器完成。

**三、后端渲染和前端渲染的区别？**  
看到这里，想必大家都能明白了后端渲染和前端渲染的区别。即前端渲染由浏览器渲染页面，后端渲染由服务器渲染页面。  
在比较早的时候，后端程序员是比较辛苦的，又要写数据处理，又得写网页，而那时候的前端被戏称为“切图仔”，在当时开发分工是比较混乱的，代码维护起来也麻烦。  
到了前后端分离阶段后，前后端责任分工开始清晰了起来，后端专注于数据上，前端专注于页面交互和页面的可视化。并且当移动端(ios系统，android系统)出现后，后端不需要进行任何处理，依然使用之前定的一套API就OK。