1、非完全前后端分离

前端只需完成页面的制作,并且完成一些js交互即可,页面中动态的数据绑定是交给后台工程师去做的

【优势】

  • 动态展示的数据在源代码中能够看到,有利于SEO优化

  • 从服务器端获取的结果就已经是最后要呈现的结果了,不需要客户端做额外的事情,所以页面加载速度快(前提是服务器端处理的速度也够快),所以类似于京东、淘宝这些网站,首屏数据一般都是经由服务器端渲染的

【弊端】

  • 如果页面中存在需要实时刷新的数据,每一次想要展示最新的数据,页面都要重新的刷新一次

  • 都交给服务器端做数据渲染,服务器端压力太大(所以京东、淘宝那种网站除了首屏是用服务器端做渲染外,其余都是用客户端做数据渲染绑定的)

  • 这种模式不利于开发(开发效率极低)

2、前后端完全分离

页面中需要动态绑定的数据是交给客户端完成渲染的

  • 向服务器端发送ajax请求

  • 把从服务器端获取的数据解析处理,拼接成我们需要的HTML字符串

  • 把拼接好的字符串替换页面中某一部分的内容

【优势】

  • 我们可以根据需求,任意修改页面中某一部分的内容(例如实时刷新),整体页面不刷新,性能好,体验好(所有的都是由ajax实现请求)

  • 有利于开发,提升开发效率(后台不需要考虑前台如何实现的,前台不需要考虑后台使用的是什么技术,真正意义上实现了技术的划分)

  • 可以同时进行开发(项目开发开始,首先制定前后端数据交互的接口文档,后台把接口先写好,客户端按照接口调取即可,后台再去实现接口功能即可)

【弊端】

  • 不利于SEO优化,页面中没有动态数据添加的部分

  • 交由客户端渲染,首先需要把页面呈现,再通过ajax请求数据,然后进行数据绑定,浏览器再把动态添加的部分重新进行渲染,无形中浪费了一些时间,没有服务器端呈现页面快

【前端模版引擎】

  • template.js

  • ejs

  • es6

【MVVM框架 - 数据驱动】

  • Vue

  • React

  • Angular