实现前后端分离,最好的方案就是SPA(Single Page Application)
阅读原文时间:2023年07月08日阅读:1

从通常意义来讲,说到必须,就是指最佳实践上,实现前后端分离,最好的方案就是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
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器

你可能感兴趣的文章