前端渲染：

指的是后端返回JSON數(shù)據(jù)，前端利用預(yù)先寫的html模板，循環(huán)讀取JSON數(shù)據(jù)，拼接字符串（es6的模板字符串特性大大減少了拼接字符串的的成本），并插入頁面。

好處：網(wǎng)絡(luò)傳輸數(shù)據(jù)量小。不占用服務(wù)端運(yùn)算資源（解析模板），模板在前端（很有可能僅部分在前端），改結(jié)構(gòu)變交互都前端自己來了，改完自己調(diào)就行。

壞處：前端耗時較多，對前端工作人員水平要求相對較高。前端代碼較多，因?yàn)椴糠忠郧霸诤笈_處理的交互邏輯交給了前端處理。占用少部分客戶端運(yùn)算資源用于解析模板。

后端渲染：

前端請求，后端用后臺模板引擎直接生成html，前端接受到數(shù)據(jù)之后，直接插入頁面。

好處：前端耗時少，即減少了首屏?xí)r間，模板統(tǒng)一在后端。前端（相對）省事，不占用客戶端運(yùn)算資源（解析模板）

壞處：占用服務(wù)器資源。

?

前端渲染與后端渲染對比：

后端渲染：

頁面呈現(xiàn)速度：快，受限于用戶的帶寬
流量消耗：少一點(diǎn)點(diǎn)（可以省去前端框架部分的代碼）
可維護(hù)性：差（前后端東西放一起，掐架多年，早就在鬧分手啦）
seo友好度：好
編碼效率：低（這個跟不同的團(tuán)隊(duì)不同，可能不對）

?

前端渲染：

頁面呈現(xiàn)速度：主要受限于帶寬和客戶端機(jī)器的好壞，優(yōu)化的好，可以逐步動態(tài)展開內(nèi)容，感覺上會更快一點(diǎn)。

流量消耗：多一點(diǎn)點(diǎn)（一個前端框架大概50KB）當(dāng)然，有的用后端渲染的項(xiàng)目前端部分也有在用框架。

可維護(hù)性：好，前后端分離，各施其職，代碼一目明了。
SEO友好度：差，大量使用ajax，多數(shù)瀏覽器不能抓取ajax數(shù)據(jù)。
編碼效率：高，前后端各自只做自己擅長的東西，后端最后只輸出接口，不用管頁面呈現(xiàn)，只要前后端人員能力不錯，效率不會低。

?

內(nèi)推信息：

有想換工作的小伙伴嗎？

對網(wǎng)易感興趣的話歡迎添加本人微信：urus35

各種方向的崗位都有噢~（坐標(biāo)：廣州北京上海杭州）

總結(jié)

以上是生活随笔為你收集整理的前端渲染与后端渲染的区别的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。