定义概念
单页应用(single page application,SPA)将所所有内容放在一个页面中,从而使整个页面更加流畅。就用户体验而言,单击导航可以定位锚点,快速定位相应的部分,并轻松上下滚动。单页应用提供的信息和一些主要内容已经过筛选和控制,可以简单单、方便地阅读和浏览。
多页应用(multi-page application,MPA)是指包含多个独立页面的应用,其中的每个页面都必须重复加载 JS、CSS 等相关资源。多页应用在跳转电时,需要刷新整页资源。
模型示意图区分
单元应用
多页应用
两者区别
单页应用(SPA) | 多页应用(MPA) | |
---|---|---|
结构 | 一个主页面 + 许多模块的组件 | 许多完整的页面 |
资源文件(css,js) | 组件公用的资源只需要加载一次 | 每个页面都要自己加载公用的资源 |
刷新方式 | 页面局部刷新 | 整页刷新 |
url模式 | a.com/#/page1 | a.com/page1.html |
a.com/#/page2 | a.com/page1.html | |
用户体验 | 页面切换快,体验佳;当初次加载文件过多时,需要做相关的调优。 | 页面切换慢,网速慢的时候,体验尤其不好 |
适用场景(SEO) | 对体验度和流畅度有较高要求的应用,不利于 SEO(可借助 SSR 优化 SEO),适用于经常切换页面的场景和数据传递较多,多表单的场景 | 适用于对 SEO 要求较高的应用 |
过渡动画 | Vue 提供了 transition 的封装组件,容易实现 | 很难实现 |
内容更新 | 相关组件的切换,即局部更新 | 整体 HTML 的切换,费钱(重复 HTTP 请求) |
路由模式 | 可以使用 hash ,也可以使用 history | 普通链接跳转 |
数据传递 | 因为单页面,使用全局变量就好(Vuex) | cookie 、localStorage 等缓存方案,URL 参数,调用接口保存等 |
相关成本 | 前期开发成本较高,后期维护较为容易 | 前期开发成本低,后期维护就比较麻烦,因为可能一个功能需要改很多地方 |
html文件请求 | 第一次进入页面的时候会请求一个html文件,刷新清除一下。切换到其他组件,此时路径也相应变化,但是并没有新的html文件请求,页面内容也变化了 | 每一次页面跳转的时候,后台服务器都会给返回一个新的html文档 |
首屏时间 | 首屏时间慢,首屏时需要请求一次html,同时还要发送一次js请求,两次请求回来了,首屏才会展示出来 | 首屏时间快,访问页面的时候,服务器返回一个 html,页面就会展示出来,这个过程只经历了一个HTTP请求 |
四、单页应用原理
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 中拿到。