实现前后端分离,最好的方案就是SPA(Single Page Application)
从通常意义来讲,说到必须,就是指最佳实践上,实现前后端分离,最好的方案就是SPA。所以才会有 前后端分离=SPA 的近似,忽视了其中的差别。但是,既然有疑问了,我们就来看一下,为什么SPA是实现前后端分离的最佳实践。先从前后端不分离开始,2010年前后,主流的方案,还是前后端不分离,以JSP为例,所有的请求,都是发送到服务器端,服务器端生成整个页面,再返回给浏览器。![](https://img2020.cnblogs.com/blog/2385718/202107/2385718-20210726174335345-1117891821.png)
就是这样的。 这么做的好处是什么呢?就是服务器端可以缓存整个页面,做静态化,访问的时候,都不用访问数据,那时候读取数据和缓存还比较少,很多时候,缓存的失效都很难处理,页面静态化很容易,多数论坛都选择用这种方式处理问题。坏处是什么呢?就是每一次,传输的数量量太大了。包括了整个Html页面,还有CSS,还有JS。而网络传输速度,又没有想像中的那么快。所以,在当时的场景下,要解决的问题就是,如何提升性能?一般有两种方式,一个是提升服务器的响应时间,一个是压缩传输文件。如果一个网页是500K,压缩到250K,时间会减少多少?emmm,跟服务器带宽有关系,不考虑用户带宽的情况下,可以算一下,服务器1兆的带宽,传输500K和传输250K需要的时间是怎么样的,我反正算这个一直很头晕。但是,结论很清楚,后端的优化,其实都比不上传输文件大小的优化。而且,真的每一次都要传送这么多内容么?我们来看一下一个Html文件的结构。包含了三部分Html,CSS,JS,然后就是数据。抛开数据不谈,CSS和JS一般都用外联文件,来利用浏览器的缓存机制,节省传输时间。那Html的部分呢?我们打开一个网页,通常都是有菜单栏,侧边栏,底部这些,这些每一个网页只是正文切换有变化,我们为什么要把这些Html加载过来一遍又一遍呢?能否把不变的部分留着,只加载变动的内容?有的,这就是Ajax。有了Ajax,就可以在访问相同结构的网页的时候,只加载数据就好了。这样,就解决了数据的问题。这种情况也持续了很多年,但是大家还是觉得很不爽。原因有两个。一个是,就算是有Ajax了,前端代码和后端代码的耦合度还是很高。特别是后端那群理工男,压根理解不了半点儿CSS,套个页面经常把样式弄混。前端要改东西,还要跑后端环境。协作效率太低了。另一个就是,页面的跳转控制权通常在后端那里,而使用Ajax之后,前端在某种程度上,也有了控制权,所以,什么样的链接应该后端跳转,什么样的链接应该前端跳转?太混乱了,分不清。这个时候,App突然出现了。在使用App的时候,后端程序员突然觉得好爽,我只需要提供数据就好了,压根不用管跳转。你给我接口,我给你数据,简单干净。App程序员也很爽,自己搭页面,就和后端调个数据,后端没数据,也可以自己Mock,根本不用等他们了。可是这个时候,很多应用都是又有App,又有网站,导致后端程序员很烦燥,一边要写一个前后端不分离的页面,一边还要写一个独立的数据接口,如果有需求变动,那简直了。。。所以,能否网页也和App一样,完全 通过数据交互 来处理?这就是前后端分离,本质上来讲,App是彻底的前后端分离。现在,答案很清楚,是可以的。那么,既然App和网页都是前后端分离,为什么只有网页有SPA的概念,而App中很少听到有提起过?SPA又为什么是前后端分离的最佳实践?再回过头来看,我们之前说过的,为了减少网络传输,出现Ajax的事情。本质上,这种设计理念的原则就是,复用一切可以复用的内容。同样的,这种理念,落地实践上,就有了模板的概念。就是一个概念,我把它先切割成几个部分,像刚刚所说的,头部,菜单,左侧边栏,右侧边栏,底部等等等。如果我这么切割了,理论上来说,前端就只需要一个页面就足以完成整个网站的内容了。哪里的内容需要更新,我就替换哪里的内容嘛。这是SPA的由来,好处就是,尽可能的减少了模板中重复内容的获取。因为是网页,模板本身还是要从服务器端来读,所以肯定是越少越好。但是实际上,一个网站的布局模板很多,几乎一个子模块一个。在这种情况下,所谓的单页面,在某种程度上,也算是多页面,但是还是把公共的内容可以抽取出来,当成是一个大的模板。前端实现了SPA,最方便最好用的,就是跳转控制权完全在自己这里了,所有的页面都可以统一管理。App端本身的页面,都是存在用户的手机本身,不存在远程加载问题,所以对于SPA的需求没有那么强烈。但实际上来说,整个App也可以遵循SPA的方式去构建和管理。所以,如果你是前后端分离,要解决的就是复用内容和页面模板的管理问题,在这个基础上,目前的SPA框架做的很好。如果说你要前后端分离,又非不用SPA。。。怎么解决相同的Html重复加载问题呢?如果你手动用JQuery来解决了,说明你是用JQuery重复发明了一套SPA的轮子,而且还未必有现成的好用 ^.^
作者:暗灭
链接:https://www.zhihu.com/question/352047943/answer/993693504
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
实现前后端分离,最好的方案就是SPA(Single Page Application)的更多相关文章
- springboot+vue的前后端分离与合并方案
pringboot和vue结合的方案网络上的主要有以下两种: 1. [不推荐]在html中直接使用script标签引入vue和一些常用的组件,这种方式和以前传统的开发是一样的,只是可以很爽的使用vue ...
- CoreCRM 开发实录 —— 前后端分离的重构
虽然2月初就回来了,可 CoreCRM 一直到5月才开始恢复开发,期间是各种生活中的意外和不方便. 1. 为什么要重构 首先是一件很值得高兴的事情:CoreCRM 有了第一位 contributor! ...
- 一个实际的案例介绍Spring Boot + Vue 前后端分离
介绍 最近在工作中做个新项目,后端选用Spring Boot,前端选用Vue技术.众所周知现在开发都是前后端分离,本文就将介绍一种前后端分离方式. 常规的开发方式 采用Spring Boot 开发项目 ...
- [转] 基于NodeJS的前后端分离的思考与实践(五)多终端适配
前言 近年来各站点基于 Web 的多终端适配进行得如火如荼,行业间也发展出依赖各种技术的解决方案.有如基于浏览器原生 CSS3 Media Query 的响应式设计.基于云端智能重排的「云适配」方案等 ...
- Web前后端分离开发(CRUD)及其演变概括
今天学习了前后端分离开发模式又从网上查了一些资料就写了一篇博客分享: 一.为什么分离前后端 1.1早期开发 1.2后段为主mvc模式 1.2.1Structs框架介绍 1.2.2Spring mcv开 ...
- 【开源】分享一个前后端分离方案-前端angularjs+requirejs+dhtmlx 后端asp.net webapi
一.前言 半年前左右折腾了一个前后端分离的架子,这几天才想起来翻出来分享给大家.关于前后端分离这个话题大家也谈了很久了,希望我这个实践能对大家有点点帮助,演示和源码都贴在后面. 二.技术架构 这两年a ...
- realmock 前后端分离方案
realmock 前后端分离方案 express + randomjson 模拟后端服务,前端服务器(比如webpack, nigix等)将请求代理到该服务器地址即可 github地址:https:/ ...
- [转帖]从壹开始前后端分离【重要】║最全的部署方案 & 最丰富的错误分析
从壹开始前后端分离[重要]║最全的部署方案 & 最丰富的错误分析 https://www.cnblogs.com/laozhang-is-phi/p/beautifulPublish-most ...
- 【手摸手,带你搭建前后端分离商城系统】03 整合Spring Security token 实现方案,完成主业务登录
[手摸手,带你搭建前后端分离商城系统]03 整合Spring Security token 实现方案,完成主业务登录 上节里面,我们已经将基本的前端 VUE + Element UI 整合到了一起.并 ...
随机推荐
- WIN10 64bit + QT5.10.0(MinGW3.5.0) + OpenCV3.4.1 无痛安装、配置
安装QT和配置MinGW 官方下载qt-opensource-windows-x86-5.10.0.exe 正常步骤安装QT5.10.0,安装过程选择自带的MinGW3.5.0编译器即可. 打开QtC ...
- Kotlin之内联回调函数
let 定义: let扩展函数的实际上是一个作用域函数,当你需要去定义一个变量在一个特定的作用域范围内,let函数的是一个不错的选择:let函数另一个作用就是可以避免写一些判断null的操作. 翻译: ...
- GoLang设计模式3 - 抽象工厂模式
之前我们介绍了工厂设计模式,现在我们再看一下抽象工厂设计模式.抽象工程模式顾名思义就是对工厂模式的一层抽象,也是创建型模式的一种,通常用来创建一组存在相关性的对象. UML类图大致如下: 类图比较复杂 ...
- SDOI2021集训 R1 半夜 题解
先贴两个博客:ajthreac yspm,建议结合起来看 \(O(n^3)\):对 \(XX\) 每个长度为 \(n\) 的字串与 \(Y\) 跑 LCS.设 \(f[i,j,k]\) 表示 \(X[ ...
- 处理burp log 小脚本
burp 日志保存 保存的日志格式为 将日志中的数据包 每个数据包保存到一个单独的txt里面 然后可以控制目录放进不同的目录中 #coding=utf-8 import re import os de ...
- Request 获取根据页面获取用户输入判断登陆成功或者失败
import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.serv ...
- EF架构封装类
http://www.woxihuan.com/46528208/1323334777088641.shtml http://www.ediclot.com/archives/2368 http:// ...
- go build 与go install
相同点都能生成可执行文件 不同点go build 不能生成包文件, go install 可以生成包文件go build 生成可执行文件在当前目录下, go install 生成可执行文件在bin目录 ...
- File Inclusion(文件包含)
File Inclusion,意思是文件包含(漏洞),是指当服务器开启allow_url_include选项时,就可以通过php的某些特性函数(include(),require()和include_ ...
- vscode快速添加引号 批量增加引号(用于批量格式化代码)
一.在浏览器中将Params复制到pycharm的py文件中 二.选中需要添加引号的部分,Ctrl+H 调出替换工具栏 三.填写正则表达式 (.*?): (.*) '$1':'$2', 右侧注意点击使 ...