前端：单页面应用-SPA和多页面应用-MPA

一、单页面应用介绍

单页面应用（single page application，SPA），就是只有一张Web页面的应用。单页面应用 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。 浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。因此，对单页面应用来说模块化的开发和设计显得相当重要。

SPA是当今网站开发技术的宠儿，很多传统网站都在或者已经转型为单页Web应用，新的单页面Web应用网站（包括移动平台上的）也如雨后春笋般涌现在人们的面前。单页面Web应用和前端工程师们息息相关，因为主要的变革发生在浏览器端，用到的技术其实还是HTML+CSS+JavaScript，所有的浏览器都原生支持，当然有的浏览器因为具备一些高级特性，从而使得单页面Web应用的用户体验更上一层楼。前端三大主流MVVM的框架React、Vue、Angular。React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站。Vue是尤雨溪编写的一个构建数据驱动的Web界面的库，它聚焦在V（view）视图层。Angular是一款优秀的前端JS框架，已经被用于Google的多款产品当中。

特点：

1、MVVM：经典MVVM开发模式，前后端各负其责。

2、ajax：重前端，业务逻辑全部在本地操作，数据都需要通过AJAX同步、提交。

3、路由：在URL中采用#号来作为当前视图的地址,改变#号后的参数，页面并不会重载。

优点：

1、用户体验好，不刷新，减少请求数据，ajax异步获取页面流程；

2、前后端分离；

3、减轻服务端压力；

4、共用一套后端程序代码，设配多端；

缺点：

1、SEO不利于搜索引擎抓取；

2、首屏加载过慢；

缺点1.的解决办法：VUE  SSR  只是解决SEO问题。

缺点2.的解决方法：路由图片、懒加载、js按需加载、使用cdn、js放在body后边、压缩代码、移除console 、debugger；异步组件（const  aa=resolve =>require(['../xxx/xx']),resolve；修改webpack配置 、添加登录专用的router配置。

二、多页面应用的介绍

多页面应用（Multi Page Application，MPA），是由多个完整的html页面组成，不在有主、分页面。页面跳转是所有的资源都要重新加载，页面之间的切换会出现卡顿空白的问题，不容易实现切换动画等。这种类型的网站也就是多页网站，也叫做多页应用。多页面跳转需要刷新所有资源，每个公共资源(js、css等)需选择性重新加载。

三、对比

	单页面应用（SinglePage Web Application，SPA）	多页面应用（MultiPage Application，MPA）
应用构成	一个外壳页面和多个页面片段组成	多个完整页面构成
公共文件加载	js/css/img等公用文件只在加载初始页面时加载，更换页面内容前后无需重新加载	跳转页面前后，js/css/img等公用文件重新加载
刷新方式	页面局部刷新或更改	整页刷新
url 模式	a.com/#/pageone  b.com/#/pagetwo	a.com/pageone.html  b.com/pagetwo.html
搜索引擎优化(SEO)	需要单独方案、实现较为困难、不利于SEO检索 可利用服务器端渲染(SSR)优化	实现方法简易

 

转载于:https://my.oschina.net/alan01/blog/3078435