search

super-fool / blog

珍藏经典, 分享思想, 共同进步.加油
3 stars 0 forks source link

SPA vs MPA #40

Open super-fool opened 5 years ago

super-fool commented 5 years ago

Multi-page App VS Single-page App

区别：

SPA / MPA 对比图: 对比图

对比项/模式 SPA MPA
结构 页面 = N 模块 = N 组件 N * 页面
体验 模块间切换快，体验佳 页面切换慢，网速慢时，体验差
资源文件 一次性加载，资源过多时，进行异步加载 页面切换，资源重新加载
适用场景 适于体验度和流畅度高的页面，不利于SEO 适于SEO高的页面
内容更新 局部更新 全局更新
路由模式 hash / history API 前端链接，后端监听跳转
数据传递 由状态管理工具实现单线流控制 cookie / localStorage / SessionStorage等缓存方案，URL参数，调用接口保存/获取
相关成本 前期开发成本较高，后期维护轻松 前端开发成本低， 后期维护麻烦，一个接口的修改需要多个页面修改

前端路由核心：试图的改变不需要向后端发送请求。