前后端渲染方式对比

一、简介

前端渲染:
指的是前端请求(例如ajax请求,jsonp请求),接受后端返回JSON数据,前端利用预先写的html模板,循环读取JSON数据,拼接字符串,并插入页面。

后端渲染:
前端请求,后端用后台模板引擎(例如ejs、jade)直接生成html,前端接受到数据之后,直接插入页面。

二、技术对比

前端渲染

优势:

  1. 端口分离,前端专注视图, 后端专注数据
  2. 可维护性高,模板进行同一化的管理, 视图层的改变, 容易更改。 不需要再去后端代码中分离,需求变更时, 后端在需要时提供数据接口即可, 前端只需更改视图层
  3. 前端渲染的项目, 跨平台时, 后端代码完全无需更改, 前端代码复用率可达到百分之七十五以上.效率极高
  4. 响应速度极快,每一次响应, 改变的只有数据, 所有的DOM元素全部加载完成, 渲染页面非常高效

劣势:

  1. 不利于SEO优化,大量使用ajax,多数浏览器不能抓取ajax数据。
  2. 首次开发成本提高,后端需要开发一套完整接口,前端需要开发一套完整模板逻辑
  3. 首次打开页面, 加载多余的DOM元素,DOM元素一次性加载, 在首次加载时, 时间变长
  4. 安全性降低,用户在使用攻击时, 更加容易看到隐藏的DOM元素.

后端渲染

优势:

  1. 开发速度快,单独开发,不涉及前端端交互
  2. SEO友好度较高, 能够一次性渲染页面,利于搜索引擎抓取
  3. 页面第一次呈现速度稍快
  4. 页面呈现消耗流量较低
  5. 更加安全,用户无法发现隐藏的DOM元素.很难进行XSS攻击

劣势:

  1. 可维护性差,页面一次成型, 后期稍改需求, 就要涉及到后端的大量更改
  2. 编码效率低,前后端代码混在一起, 不利于开发.后端没有办法专注数据, 前端没有办法专注视图
  3. 无法进行跨平台开发,一旦项目成型, 是什么样,就是什么样.完全没有办法从浏览器移植安卓等系统中,也就是不能调用相机, 语音等平台设备
发布了2 篇原创文章 · 获赞 0 · 访问量 95
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览