单页应用和多页应用的区别

一、定义区分

【1.1】单页应用

单页应用又称 SPA（Single Page Application）指的是使用单个 html 完成多个页面切换和功能的应用。这些应用只有一个 html 文件作为入口，一开始只需加载一次 js,css 等相关资源。使用 js 完成页面的布局和渲染。页面展示和功能室根据路由完成的。单页应用跳转，就是切换相关组件，仅刷新局部资源。

【1.2】多页应用

多页应用又称 MPA（Multi Page Application）指有多个独立的页面的应用，每个页面必须重复加载 js,css 等相关资源。多页应用跳转，需要整页资源刷新。

二、模型示意图区分

【2.1】单页应用模型示意图

【2.2】多页应用模型示意图

三、单页面和多页面应用的区别

四、单页应用原理

js会感知到url 的变化，通过这一点，可以用js动态的将当前页面的内容清除掉，然后将下一个页面的内容挂载到当前页面上，这个时候的路由不是后端来做了，而是前端来做，判断页面到底是显示哪个组件，清除不需要的，显示需要的组件。这种过程就是单页应用，每次跳转的时候不需要再请求html文件了

五、单页应用开发中可能存在的问题

1、客户端支持。目前测试中发现部分 APP 尚未支持 hash 方式的返回。APP 测在 webview 的返回按钮上需要实现逻辑：如果不能后退，则关闭 webview；如果能后退，则后退。

2、页面状态保留。使用 react-router 时，切换页面不能保留页面的滚动高度。页面关闭后，上个页面被销毁（执行了 componentWillUnmount ），用户如果在上个页面操作到了底部再做跳转，则返回后会重新回到顶部。体验还是比不上 native，但是依然甩传统的页面跳转几条街。

3、页面带参数。原生的 query 参数应该在 # 之前，index.html?from=onlineSign#pageA。但是 # 后还是可以有参数，index.html#pageA?from=onlineSign ，这里的参数在 location.query 或者 location.search 中拿不到，但是可以在 router 中拿到。