单页面和多页面应用场景总结
一、总结
一句话总结：
多页面应用做官网、电商类这种对SEO和首屏加载速度要求比较高的项目，单页面可以做后台管理系统页面
1、什么是单页面应用？
a、【外壳页面】：在项目应用中，以单个html页面作为外壳页面，并在外壳页面一次性加载项目所依赖的资源（CSS、JS）。
b、【无感切换】：项目中其他页面作为页面片段在外壳页面中进行无感切换（例如：利用H5的History监听到URL的变化，对页面片段进行切换（删除和添加））。
2、单页面形式的传统多页面结构？
本质上是将单页面应用拆分成多个单页面应用，多个单页面应用之间的调整通过传统形式来实现
3、单页面原理？
利用H5的History监听到URL的变化，对页面片段进行切换（删除和添加）
4、如何选择页面结构？
a、对于官网、电商类这种对SEO和首屏加载速度要求比较高的项目，可以采用多页面应用结构。或者优秀“服务器端渲染方案”。
b、如果是后台管理系统页面，不对外开放的系统，用单页面应用，这样可以利用第三方框架（Vue、React等）对系统进行组件化，
c、单页面应用如果系统过大，导致首屏加载缓慢，可以将系统拆分成单页面形式的多页面应用。一般来说登录页面作为后台管理系统的首屏页面。
二、单页面和多页面应用场景总结
转自或参考：单页面和多页面应用场景总结_javascript_u012475786的专栏-CSDN博客
https://blog.csdn.net/u012475786/article/details/90081105
一、什么是单页面应用？
基本概念：在项目应用中，以单个html页面作为外壳页面，并在外壳页面一次性加载项目所依赖的资源（CSS、JS）。项目中其他页面作为页面片段在外壳页面中进行无感切换（例如：利用H5的History监听到URL的变化，对页面片段进行切换（删除和添加））。
单页面应用结构图：
优点：项目依赖资源共用，页面片段切换流畅（无感）、页面片段可以进行复用，页面片段切换时可以使用转场动画效果；
缺点：不利于SEO优化，首屏加载缓慢。至于有些资料说开发成本高、这个不认同，以下介绍；
二、什么是多页面应用？
这里我觉得多页面应用可以分为两种形式：
1. 传统形式：这种技术方案就是最初搭建页面的实现方式，每个页面都有各自的HTML文件，每个页面所依赖的资源都在各自HTML文件中引入，并且页面之间的跳转通过URL跳转。架构图如下所示：
2. 单页面形式：这种技术方案根据实际项目出发，本质上是将单页面应用拆分成多个单页面应用，多个单页面应用之间的调整通过传统形式来实现；架构图如下所示：
总结：传统形式结构是完全符合多页面的思想。单页面结构是单页面应用和多页面应用的互补方案；解决了首屏加载慢的问题，一定程度优化了SEO优化（作用感觉不大）。相对于传统形式结构，它可以像单页面应用一样实现转场动画（多页面跳转之间还是不能实现）。整理如下图所示：
三、如何选择页面结构？
还是那句话，具体根据项目分析，对于官网、电商类这种对SEO和首屏加载速度要求比较高的项目，可以采用多页面应用结构。或者优秀“服务器端渲染方案”；如果是后台管理系统页面，不对外开放的系统，用单页面应用，这样可以利用第三方框架（Vue、React等）对系统进行组件化，如果系统过大，导致首屏加载缓慢，可以将系统拆分成单页面形式的多页面应用；一般来说登录页面作为后台管理系统的首屏页面。