单页应用 vs 多页应用

墨蓝 2023-02-23 08:41 9阅读 0赞

web项目可分为单页应用 和 多页应用。单页应用，就是只有一个页面，其他内容，估计就是动态加载，用从加载其他页面片段 + 请求后台 这种方式来完成。这么一说，我之前做的，其实都是多页应用。

相比之下，

## 单页应用的优缺点 ##

单页应用的**优势**是什么呢？

1、页面切换非常快，不会出现白屏，还可以作出过渡效果
    
    2、公用的js和css一次性加载，不浪费
    
    3、良好的前后端分离，服务器端只管响应数据请求，不用关心页面渲染，压力小，API重用性高

**缺点**呢？

1、首次加载慢。不难理解，这么多东西要一下子加载，当然慢了。加载出来就好了。
    
    2、不利于SEO。其实，如果不是互联网项目，可忽略不计
    
    3、复杂，对开发要求高。也好理解，这么多东西，都挤在一个页面上，怎么控制，怎么加载，十分考验工夫。

依我看，前2条都不是什么大问题，就是问题3，可能会限制单页应用用于复杂系统。我没有开发过单页应用系统，但按我的理解，在大型、复杂的系统中，不宜采用单页应用。单页应用，最适合手机端，但从目前来看，手机端的应用，都比较简单。也有可能出现一种混合模式，即一个大型应用，会由多个单页应用来构成。

## 单页应用的意义 ##

速度快，体验好这些不是最明显的优势，多页应用努力一下，也能接近这个目标。我认为单页应用最大的意义是使得前后端分离真正可以落地。曾几何时，我从网上习得“前后端分离”一词，跃跃欲试，蠢蠢欲动，搞了一把前后端分离，结果发现，页面重用简直就是恶梦，因为浏览器实在是太弱了，什么模板页之类的东西，其实都需要服务器来完成。之后我认为，所谓的前后端分离，要界定究竟什么是前后端？前端除了浏览器，其实还包括服务器端运行的控制器。（见拙作：[前后端分离][Link 1]）

但如果是单页应用，就不一样了。没有所谓模板这个概念，只有一个页面，其余都是片段。服务器真的就是与渲染解耦，一心只负责数据响应就好。不过，工作只是由后端转移到了前端而已。据说单页应用，前端开发人员要多于服务器端。你看看，控制器，视图吗，数据层，不亦乐乎，开心就好。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0_size_16_color_FFFFFF_t_70]

本质上，单页应用就是一个富（肥）客户端。事物都是螺旋式发展的。2000年的时候，CS应用如日中天，BS架构应用方兴未艾，但是BS架构当时的缺点是性能不高，ajax技术刚出来，并未普及，体验也远远比不上CS的好。但那时CS和BS之争已经如火如荼，微软还出了个折中的产物：智能客户端。智能客户端就是个CS结构应用，但是它会自动更新，一定程度上弥补了CS部署更新工作量大的问题。后来的发展大家都看到了，CS日趋式微，BS成为霸主。当然啦，还是有flash啦、silverlight啦这类伪BS的富客户端技术做无谓的挣扎，昙花一现，也同样被抛弃。没想到，10年一轮回，现在，单页应用这种既是BS又是富客户端的模式出来了。

有点意思。

[Link 1]: https://blog.csdn.net/leftfist/article/details/86313950
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200706174844128.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0,size_16,color_FFFFFF,t_70