前端渲染：

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

好處：網絡傳輸數據量小。不占用服務端運算資源（解析模板），模板在前端（很有可能僅部分在前端），改結構變交互都前端自己來了，改完自己調就行。

壞處：前端耗時較多，對前端工作人員水平要求相對較高。前端代碼較多，因為部分以前在后臺處理的交互邏輯交給了前端處理。占用少部分客戶端運算資源用于解析模板。

后端渲染：

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

好處：前端耗時少，即減少了首屏時間，模板統一在后端。前端（相對）省事，不占用客戶端運算資源（解析模板）

壞處：占用服務器資源。

?

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

后端渲染：

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

?

前端渲染：

頁面呈現速度：主要受限于帶寬和客戶端機器的好壞，優化的好，可以逐步動態展開內容，感覺上會更快一點。

流量消耗：多一點點（一個前端框架大概50KB）當然，有的用后端渲染的項目前端部分也有在用框架。

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

?

內推信息：

有想換工作的小伙伴嗎？

對網易感興趣的話歡迎添加本人微信：urus35

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。