什么是前端渲染和后端渲染，前端路由和后端路由。

Myth丶恋晨 2023-03-03 11:07 18阅读 0赞

[—文章首发—][Link 1]

# 什么是前端渲染和后端渲染，前端路由和后端路由。 #

[视频讲解][Link 2]

## 后端渲染： ##

**服务器直接生产渲染好对应的HTML页面, 返回给客户端进行展示**。比如：jsp页面

**好处**：前端耗时少，即减少了首屏时间，模板统一在后端。前端（相对）省事，不占用客户端运算资源（解析模板）

**坏处**：占用服务器资源。

## 前端渲染 ##

**浏览器中显示的网页中的大部分内容，都是由前端写的 js 代码在浏览器中执行，最终渲染出来的网页。**

也可以怎么说：**后端返回JSON数据，前端利用预先写的html模板，循环读取JSON数据，拼接字符串，并插入页面。**

**好处**：网络传输数据量小。不占用服务端运算资源（解析模板），模板在前端（很有可能仅部分在前端），改结构变交互都前端自己来了，改完自己调就行。

**坏处**：前端耗时较多，对前端工作人员水平要求相对较高。前端代码较多，因为部分以前在后台处理的交互逻辑交给了前端处理。占用少部分客户端运算资源用于解析模板。

## 前端渲染与后端渲染对比： ##

**后端渲染：**

页面呈现速度：快，受限于用户的带宽

流量消耗：少一点点（可以省去前端框架部分的代码）

可维护性：差（前后端东西放一起，掐架多年，早就在闹分手啦）

seo友好度：好

编码效率：低（这个跟不同的团队不同，可能不对）

**前端渲染：**

页面呈现速度：主要受限于带宽和客户端机器的好坏，优化的好，可以逐步动态展开内容，感觉上会更快一点。

流量消耗：多一点点（一个前端框架大概50KB）当然，有的用后端渲染的项目前端部分也有在用框架。

可维护性：好，前后端分离，各施其职，代码一目明了。

SEO友好度：差，大量使用ajax，多数浏览器不能抓取ajax数据。

编码效率：高，前后端各自只做自己擅长的东西，后端最后只输出接口，不用管页面呈现，只要前后端人员能力不错，效率不会低。

## 什么是路由 ##

路由是根据不同的 url 地址展示不同的内容或页面。

## 前端路由 ##

前端路由的核心是：**改变URL，但是页面不进行整体的刷新。**

很重要的一点是页面不刷新，前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做，每跳转到不同的URL都是使用前端的锚点路由. 随着（SPA）单页应用的不断普及，前后端开发分离，目前项目基本都使用前端路由，在项目使用期间页面不会重新加载。

优点：

1.用户体验好，和后台网速没有关系，不需要每次都从服务器全部获取，快速展现给用户

2.可以再浏览器中输入指定想要访问的url路径地址。

3.实现了前后端的分离，方便开发。有很多框架都带有路由功能模块。

## 后端路由 ##

**浏览器在地址栏中切换不同的 url 时，每次都向后台服务器发出请求，服务器响应请求，服务器渲染好整个页面, 并且将页面返回给客户端。**

这种情况下渲染好的页面, 不需要单独加载任何的js和css, 可以直接交给浏览器展示, 这样也有利于SEO的优化.

优点：分担了前端的压力，html和数据的拼接都是由服务器完成。

缺点：当项目十分庞大时，加大了服务器端的压力，同时在浏览器端不能输入制定的url路径进行指定模块的访问。另外一个就是如果当前网速过慢，那将会延迟页面的加载，对用户体验不是很友好。HTML代码和数据以及对应的逻辑会混在一起, 不利于编写和维护。

--------------------

## 图解 ##

前端路由阶段：

![format_png][]

前后端分离阶段

![format_png 1][]

SPA（单页面富应用）页面的阶段。

![format_png 2][]

参考链接：

https://www.cnblogs.com/wuyunna/p/11496430.html  
https://www.cnblogs.com/wwwxxjsyy/p/11008443.html

[Link 1]: https://aqingya.cn/articl/c35629ff.html
[Link 2]: https://www.bilibili.com/video/BV15741177Eh?p=100
[format_png]: /images/20230208/195381c8ed35431b89cc188aad98e858.png
[format_png 1]: /images/20230208/18b4398a524346a5bc5309e12f6f184d.png
[format_png 2]: /images/20230208/3b94fe35f1884c06a768fea172ea8d43.png

发表评论取消回复

表情：

评论列表（有 0 条评论，18人围观）

还没有评论，来说两句吧...

相关阅读

相关前端路由与后端路由的区别

前端路由与后端路由的区别

淡淡的烟草味﹌/ 2024年04月20日 12:08/ 0 赞/ 69 阅读

相关前端和后端是什么？

前端是指网站或应用的用户界面，它负责处理用户与网站或应用交互的所有内容。前端通常使用 HTML、CSS 和 JavaScript 来构建用户界面，并与用户进行交互。后端是指

秒速五厘米/ 2024年03月26日 10:20/ 0 赞/ 84 阅读

相关前端路由（front-end routing）和后端路由（back-end routing）的区别

聚沙成塔·每天进步一点点 ⭐ 专栏简介前端入门之旅：探索Web开发的奇妙世界欢迎来到前端入门之旅！感兴趣的可以订阅本专栏哦！这个专栏是为那些对Web开发感

布满荆棘的人生/ 2024年02月05日 12:30/ 0 赞/ 41 阅读

相关什么是前端渲染和后端渲染，前端路由和后端路由。

[—文章首发—][Link 1] 什么是前端渲染和后端渲染，前端路由和后端路由。 [视频讲解][Link 2] 后端渲染：服务器直接生产渲

Myth丶恋晨/ 2023年03月03日 11:07/ 0 赞/ 19 阅读

相关动态路由（前端/后端控制）

动态路由后台管理系统，大部分都会涉及到权限控制这一项需求，即：根据不同登录角色渲染不同页面功能现在主流有两种方式： 1. 前端控制逻辑简单，

Bertha 。/ 2023年01月19日 03:10/ 0 赞/ 9 阅读

相关前端路由与后端路由

后端路由意味着浏览器刷新页面。显然很多 webapp 的需求上是不希望这样的体验的。网速慢的话说不定屏幕全白再有新内容。前端路由就不会有这样的问题了。随意控制，逻辑也可

旧城等待，/ 2022年07月16日 03:39/ 0 赞/ 242 阅读

相关前端路由与后端路由

说起前端框架，我个人主张有框架不如无框架，这个观点要先从框架和库的区别说起。　　我所理解的库，解决的是代码或是模块级别的复用或者对复杂度的封装问题;而框架，更多的是对模式级

谁借莪１个温暖的怀抱￠/ 2022年06月14日 04:27/ 0 赞/ 235 阅读

相关前端路由与后端路由

后端路由意味着浏览器刷新页面。显然很多 webapp 的需求上是不希望这样的体验的。网速慢的话说不定屏幕全白再有新内容。前端路由就不会有这样的问题了。随意控制，逻辑也可

叁歲伎倆/ 2022年06月14日 04:26/ 0 赞/ 249 阅读

相关什么是前端路由

前端路由在很多开源的js类库框架中都得到支持，如angularJS，Backbone，Reactjs等等。这篇文章主要和大家谈谈什么是前端路由，以及它的使用场景及优缺点 1

心已赠人/ 2022年06月14日 04:26/ 0 赞/ 260 阅读

相关前端路由和后端路由的对比及优劣

目录前言路由后端路由前端路由 -------------------- 前言本篇主要从web应用中页面跳转方式来说明目前web开发技术中常见的两种页

r囧r小猫/ 2022年04月13日 11:16/ 0 赞/ 466 阅读