多页面与单页面应用的区别

单页面,顾名思义只有一个界面。

界面是通过URL来定位的,所以单页面应用从头到尾它的html地址都是不变的,注意哦,是html地址,而不是URL地址,这两者还是有点区别的。html地址是截止到.html的界面地址,比如:http://about.html#setting这个地址中,html地址是http://about.html,而完整的URL是http://about.html#setting

而多页面应用,顾名思义就是多个界面间的跳转,会伴随着html地址的改变。

在单页面应用中,通常是由一个外部框架和一个一个组件组成的,界面之间的切换其实就是组件的移除和新组建的添加。

在多页面中,则可以看到导航栏中地址的变化,是从一个完整的页面跳转到另一个完整的页面(注意区分页面和界面)。

对比项 多页应用模式MPA 单页应用模式SPA
应用构成 由多个完整页面构成 一个外壳页面和多个页面片段构成
跳转方式 页面之间的跳转是从一个页面跳转到另一个页面 页面片段之间的跳转是把一个页面片段删除或隐藏,加载另一个页面片段并显示出来。这是片段之间的模拟跳转,并没有开壳页面
跳转后公共资源是否重新加载
URL模式 http://xxx/page1.htmlhttp://xxx/page2.html http://xxx/shell.html#page1http://xxx/shell.html#page2
用户体验 页面间切换加载慢,不流畅,用户体验差,特别是在移动设备上 页面片段间的切换快,用户体验好,包括在移动设备上
能否实现转场动画 无法实现 容易实现(手机app动效)
页面间传递数据 依赖URLcookie或者localstorage,实现麻烦 因为在一个页面内,页面间传递数据很容易实现(这里是我补充,父子之间传值,或vuexstorage之类)
搜索引擎优化(SEO 可以直接做 需要单独方案做,有点麻烦
特别适用的范围 需要对搜索引擎友好的网站 对体验要求高的应用,特别是移动应用
开发难度 低一些,框架选择容易 高一些,需要专门的框架来降低这种模式的开发难度
相关推荐
zhanshuo5 小时前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html
火柴盒zhang6 小时前
websheet在线电子表格(spreadsheet)在集团型企业财务报表中的应用
前端·html·报表·合并·spreadsheet·websheet·集团财务
孤水寒月12 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀12 小时前
html初学者第一天
前端·html
Eiceblue19 小时前
使用 C# 发送电子邮件(支持普通文本、HTML 和附件)
开发语言·c#·html·visual studio
超级土豆粉21 小时前
Turndown.js: 优雅地将 HTML 转换为 Markdown
开发语言·javascript·html
忧郁的蛋~21 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
然我1 天前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html
小飞悟1 天前
前端高手才知道的秘密:Blob 居然这么强大!
前端·javascript·html
百锦再1 天前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref