SPA(单页面应用)和MPA(多页面应用)
单页面应用
第一次进入页面时会请求一个html文件,刷新清除一下,切换到其他组件,此时路径也相应变化,但是并没有新的html文件请求,页面内容却变化了。
原理:js会感知到url的变化,通过这一点可以用js动态地将当前页面的内容清除,然后将下一个页面的内容挂载到当前页面上。这个时候的路由不再是后端来做了,而是前端来做,判断页面显示相应的组件,清除不需要的。
1. 页面跳转:js渲染2.优点:页面切换快3.缺点:首屏时间稍慢,SEO差
1.为什么页面切换快?
页面每次切换跳转时,并不需要处理html文件的请求,这样就节约了很多HTTP发送时延,所以我们在切换页面的时候速度很快。
2.为什么首屏时间慢,SEO 差?
单页应用的首屏时间慢,首屏时需要请求一次html,同时还要发送一次js请求,两次请求回来了,首屏才会展示出来。相对于多页面应用,首屏时间慢。
SEO效果差,因为搜索引擎只认识html里的内容,不认识js渲染生成的内容,搜索引擎不识别,也就不会给一个好排名,会导致单页应用做出来的网页在搜索引擎上的排名差。
3.为什么还要用 Vue 呢?
Vue官方提供了一些其他的技术来解决这些缺点,比如服务端渲染技术(SSR),通过这些技术可以完美解决这些缺点,这样一来单页面应用对于前端来说就是非常完美的页面开发解决方案了。
多页面应用
每一次页面跳转的时候,后台服务器都会返回一个新的html文档,这种类型的网站也就是多页网站,也叫多页应用。
1.页面跳转:返回HTML
2.优点:首屏时间快,SEO效果好3.缺点:页面切换慢
1.为什么多页应用的首屏时间快?
首屏时间叫做页面首个屏幕的内容展现的时间,当我们访问页面的时候,服务器返回一个html,页面就会展示出来,这个过程只经历了一个HTTP请求,所以页面展示的速度非常快。
2.为什么搜索引擎优化效果好(SEO)?
搜索引擎在做网页排名的时候,要根据网页的内容才能给网页权重,来进行网页的排名。搜索引擎是可以识别html内容的,而我们每个页面所有的内容都放在html中,所以这种多页应用SEO排名效果好。
3.缺点:切换慢
每次跳转都需要发送一个HTTP请求,如果网络状态不好,在页面间来回跳转时,就会发生明显的卡顿,影响用户体验。
总结
/ | 多页面应用模式MPA | 单页面应用模式SPA |
应用构成 | 由多个完整页面构成 | 一个外壳页面和多个页面片段构成 |
跳转方式 | 页面之间的跳转是从一个页面到另一个页面 | 一个页面片段删除或隐藏,加载另一个页面片段并显示。片段间的模拟跳转,没有开壳页面 |
跳转后公共资源是否重新加载 | 是 | 否 |
URL模式 | /page1.html和/page2.html | #page1和#page2 |
用户体验 | 页面间切换加载慢,不流畅,用户体验差,尤其在移动端 | 页面片段间切换快,用户体验好,包括移动设备 |
能否实现转场动画 | 否 | 容易实现(手机APP动效) |
页面间传递数据 | 依赖URL、cookie或者localstorage,实现麻烦 | 页面传递数据容易(Vuex或Vue中的父子组件通讯props对象) |
搜索引擎优化(SEO) | 可以直接做 | 需要单独方案(SSR) |
特别适用的范围 | 需要对搜索引擎友好的网站 | 对体验要求高,特别是移动应用 |
开发难度 | 较低,框架选择容易 | 较高,需要专门的框架来降低这种模式的开发难度 |
SPA(单页面应用)和MPA(多页面应用)相关推荐
- 什么是单页面应用(SPA)和多页面应用(MPA)
背景 最初我们的应用都是多页面应用,多页面应用就是每次客户单请求都返回一个新的页面.在互联网初期,这个问题并没有带来很差的用户体验,但是随着移动互联网的发展以及用户的体验, 开发者开始考虑,为什么我们 ...
- 【SPA】SPA单页面应用详解
一.什么是SPA 单页应用SPA是一种网络应用程序或网站的模型,它通过动态重写当前页面来与用户交互. 这种方法避免了页面之间切换打断用户体验在单页面应用中,所有必要的代码(HTML.JavaScrip ...
- (25):SPA单页面的理解
对SPA单页面的理解,它的优缺点分别是什么,如何实现SPA应用 一.什么是SPA 1.SPA(single-page application),翻译过来就是单页应用 2.SPA是一种网络应用程序或网站 ...
- 通过Blazor使用C#开发SPA单页面应用程序(4) - Ant Design
通过Blazor使用C#开发SPA单页面应用程序(1) 通过Blazor使用C#开发SPA单页面应用程序(2) 通过Blazor使用C#开发SPA单页面应用程序(3) 前面学习了Blazor的特点.环 ...
- [vue] SPA单页面的实现方式有哪些?
[vue] SPA单页面的实现方式有哪些? 1.监听地址栏中hash变化驱动界面变化2.用pushsate记录浏览器的历史,驱动界面发送变化3.直接在界面用普通事件驱动界面变化它们都是遵循同一种原则: ...
- [vue] 说说你对SPA单页面的理解,它的优缺点分别是什么?
[vue] 说说你对SPA单页面的理解,它的优缺点分别是什么? 介绍:SPA应用就是一个web应用,可理解为:是一种只需要将单个页面加载到服务器之中的web应用程序.当浏览器向服务器发出第一个请求时, ...
- Vue复习笔记 (二)SPA单页面应用(优化首屏加载)
一.概念 SPA(single-page application):通过动态重写当前页面来与用户交互 代码通过单个页面的加载而检索,或者动态装载适当的资源并添加到页面 JS框架如 react, vue ...
- SPA单页面应用首屏加载速度提升方法
SPA单页面应用首屏加载速度提升方法 首屏加载 计算首屏加载时间公式 解决方法 减少入口文件体积 静态资源本地缓存 UI框架按需加载 避免组件重复打包 图片资源压缩 开启GZip压缩 首屏加载 首屏加 ...
- SPA(单页面应用)、路由模式
SPA SPA ( single page App ) 单页面应用 多页面应用 有多个html文件,通过a标签的连接联通各个页面 缺点 开发起来太冗余,编译.压缩很耗时间 页面之间的跳转速度太慢,这个 ...
最新文章
- linux expect 自动交互 执行命令 超时 不完整 中断 解决方法
- 误区30日谈16-20
- 卷积神经网络 全连接层(稠密层)是什么?(全连接层就是每一个结点都与上一层的所有结点相连的网络层)
- QDoc特殊内容special content
- 26-Ubuntu-文件和目录命令-其他命令-管道
- 在Linux下编译安装Apache2(2)
- Orleans—一些概念
- Java 哪些事最困扰你?
- (译)通过WebChannel/WebSockets与QML中的HTML交互
- JQuery的Ajax跨域请求的解决方案
- Mybatis——动态SQL实现数据的增删改查
- 微软最近对外发布了必应翻译应用开发接口(API),Facebook成为第一批尝鲜者...
- 谷歌翻译突然用不了了
- 自动化之RPA工具之UiPath
- 火山视频解析,火山视频去水印
- 解决手机应用安装失败却占内存
- delphi写QQ消息群发(模拟按键精灵)
- 阿里云国际站卸载阿里云盾监控
- 华为日历怎么显示一月_华为P20使用感受
- Go语言基础(一篇上手go语言基本语法)