vue--单页面应用和多页面应用
https://blog.csdn.net/qq_29918313/article/details/102457235
https://juejin.im/post/6844903512107663368
单页面应用(SinglePage Web Application,SPA)
只有一张Web页面的应用,是一种从Web服务器加载的富客户端,单页面跳转仅刷新局部资源 ,公共资源(js、css等)仅需加载一次,常用于PC端官网、购物等网站
第一次进入页面的时候会请求一个html
文件,刷新清除一下。切换到其他组件,此时路径也相应变化,但是并没有新的html
文件请求,页面内容也变化了。
原理:JS
会感知到url
的变化,通过这一点,可以用js动态的将当前页面的内容清除掉,然后将下一个页面的内容挂载到当前页面上,这个时候的路由不是后端来做了,而是前端来做,判断页面到底是显示哪个组件,清除不需要的,显示需要的组件。这种过程就是单页应用,每次跳转的时候不需要再请求html文件了。
多页面应用(MultiPage Application,MPA)
多页面跳转刷新所有资源,每个公共资源(js、css等)需选择性重新加载,常用于 app 或 客户端等
每一次页面跳转的时候,后台服务器都会给返回一个新的html
文档,这种类型的网站也就是多页网站,也叫做多页应用。
具体对比分析:
单页面应用(SinglePage Web Application,SPA) | 多页面应用(MultiPage Application,MPA) | |
---|---|---|
组成 | 一个外壳页面和多个页面片段组成 | 多个完整页面构成 |
资源共用(css,js) | 共用,只需在外壳部分加载 | 不共用,每个页面都需要加载 |
跳转方式 | 页面之间的跳转是从一个页面跳转到另一个页面 | 页面片段之间的跳转是把一个页面片段删除或隐藏,加载另一个页面片段并显示出来。这是片段之间的模拟跳转,并没有开壳页面 |
刷新方式 | 页面局部刷新或更改 | 整页刷新 |
url 模式 |
a.com/#/pageone a.com/#/pagetwo |
a.com/pageone.html a.com/pagetwo.html |
用户体验 | 页面片段间的切换快,用户体验良好 | 页面切换加载缓慢,流畅度不够,用户体验比较差 |
转场动画 |
容易实现(手机app 动效)
|
无法实现 |
数据传递 |
因为在一个页面内,页面间传递数据很容易实现(父子之间传值,或vuex 或storage 之类)
|
依赖 url传参、或者cookie 、localStorage等,实现麻烦 |
搜索引擎优化(SEO) | 需要单独方案、实现较为困难、不利于SEO检索 可利用服务器端渲染(SSR)优化 | 实现方法简易 |
试用范围 | 高要求的体验度、追求界面流畅的应用 | 适用于追求高度支持搜索引擎的应用 |
开发成本 | 较高,常需借助专业的框架 | 较低 ,但页面重复代码多 |
维护成本 | 相对容易 | 相对复杂 |
多页应用相关问题:
为什么多页应用的首屏时间快?
首屏时间叫做页面首个屏幕的内容展现的时间,当我们访问页面的时候,服务器返回一个html,页面就会展示出来,这个过程只经历了一个HTTP请求,所以页面展示的速度非常快。
为什么搜索引擎优化效果好(SEO)?
搜索引擎在做网页排名的时候,要根据网页内容才能给网页权重,来进行网页的排名。搜索引擎是可以识别html内容的,而我们每个页面所有的内容都放在Html
中,所以这种多页应用,seo排名效果好。
缺点,就是切换慢
因为每次跳转都需要发出一个http请求,如果网络比较慢,在页面之间来回跳转时,就会发现明显的卡顿。
单页应用相关问题:
为什么页面切换快?
页面每次切换跳转时,并不需要做html
文件的请求,这样就节约了很多http
发送时延,我们在切换页面的时候速度很快。
缺点:首屏时间慢,SEO差
单页应用的首屏时间慢,首屏时需要请求一次html
,同时还要发送一次js
请求,两次请求回来了,首屏才会展示出来。相对于多页应用,首屏时间慢。
单页面应用首屏时间慢问题解决方法:https://blog.csdn.net/jing_jing95/article/details/109163795
SEO效果差,因为搜索引擎只认识html
里的内容,不认识js
的内容,而单页应用的内容都是靠js
渲染生成出来的,搜索引擎不识别这部分内容,也就不会给一个好的排名,会导致单页应用做出来的网页在百度和谷歌上的排名差。
有这些缺点,为什么还要使用Vue呢?
Vue
还提供了一些其它的技术来解决这些缺点,比如说服务器端渲染技术(https://cn.vuejs.org/v2/guide/ssr.html)优化SEO问题,通过这些技术可以完美解决这些缺点,解决完这些问题,实际上单页面应用对于前端来说是非常完美的页面开发解决方案。
vue--单页面应用和多页面应用相关推荐
- app怎么嵌套vue页面_app内嵌vue单页面应用的一些坑
写这篇文章的原因是想总结一下自己最近开发的一个内嵌app的vue单页面项目,看看有哪些坑!!! 1.白屏 项目第一次上线正常 项目第二次上线,20多个用户反馈白屏(没见过这世面,心里慌的不行!!!), ...
- Nginx 解决WebApi跨域二次请求以及Vue单页面问题
Nginx 解决WebApi跨域二次请求以及Vue单页面问题 参考文章: (1)Nginx 解决WebApi跨域二次请求以及Vue单页面问题 (2)https://www.cnblogs.com/ji ...
- nginx配置解决vue单页面打包文件大,首次加载慢的问题
nginx配置解决vue单页面打包文件大,首次加载慢的问题 参考文章: (1)nginx配置解决vue单页面打包文件大,首次加载慢的问题 (2)https://www.cnblogs.com/golo ...
- nignx部署Vue单页面刷新路由404问题解决
nignx部署Vue单页面刷新路由404问题解决 参考文章: (1)nignx部署Vue单页面刷新路由404问题解决 (2)https://www.cnblogs.com/wuchenggong/p/ ...
- vue.js能美化界面吗_vue将单页面改造成多页面应用的方法
问题描述: 手头有一个项目是使用 vue-cli 搭建的单页面应用.项目分为了管理平台和用户查看页面,用户查看页面是很简单的页面,但是在加载过程中,却加载了整个应用的打包代码,量重且影响了响应和体验. ...
- fullpage在vue单页面当中使用会出现的问题以及解决办法
fullpage在vue单页面当中使用会出现的问题以及解决办法 参考文章: (1)fullpage在vue单页面当中使用会出现的问题以及解决办法 (2)https://www.cnblogs.com/ ...
- php vue seo,处理 Vue 单页面 SEO 的另一种思路
(设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plugin形成更优的配合) 单页面应用在前端正大放光彩.三大框架 Angular.Vue.Rea ...
- Vue 单页面应用 把公共组件放在 app.vue 但是我希望某个页面没有这些公共组件怎么办???(比如登陆页面)
<div class="all" v-if="$route.path!=='/login'" > Vue 单页面应用 把公共组件放在 app.v ...
- vue 单页面(SPA) history模式调用微信jssdk 跳转后偶尔 “invalid signature“错误解决方案
vue 单页面(SPA) history模式调用微信jssdk 跳转后偶尔 "invalid signature"错误解决方案 参考文章: (1)vue 单页面(SPA) hist ...
- vue如何在一个工程里判断h5还是pc,(利用在一个页面显示不同router-view内容原理,本文只使用于单页面项目,多页面项目请查看我另一篇博文)
本文只适用于单页面项目,多页面项目请查看我另一篇博文 vue如何在一个工程里显示pc和手机端(适用多页面复杂项目) https://blog.csdn.net/qq_37816525/article/ ...
最新文章
- 【算法总结】数学问题-最大公约数和最小公倍数
- java alsa 编程_搭建JavaWeb开发环境
- Python3 多线程问题:ModuleNotFoundError: No module named 'thread',原因及解决办法。
- asp.net 2中的图片上传
- C语言*运算符和运算符
- Microsoft SQL Server Desktop Engine安装过程中遇到的问题(2)
- python+webdriver(三)
- statsmodels学习——使用多元回归拟合数据
- 怎么样写一个 node.js模块以及NPM Package
- 通过SQL语句删除重复记录
- java判断map是否为空_Java自定义Exception
- caddy 作为微服务的 API gateway
- WEB专用服务器的安全设置
- 早悟兰因(兰因絮果)
- 最常用的看板工具,敏捷开发工具
- python为图像设置标记_Python OpenCV 图像标记,取经之旅第 12 天
- AttributeError: module ‘win32com.gen_py.00020905-0000-4B30-A977-D214852036FF
- RDF 1.1 N-Triples
- 李永乐老师讲一个量子计算机,别再只知道罗翔了!网上最受欢迎的14位老师,个个让人“开天眼”!...
- 关于 ONLYOFFICE 的安卓 Android 手机版
热门文章
- 河南专升本公共英语语法考点分析---代词、介词、连接词
- java 秒表暂停_java – 停止秒表
- 计算机管理评价指标,评价指标体系
- 计算机学院校友论坛,西工大计算机学院北京校友论坛成立并举办第一次活动
- 攻防世界Web题 - unseping 总结
- Python 网络编程(6)总结【转】
- 值得一看!2018年最优秀的9个Android Material Design Apps!
- idea做一个日志自动生成的jar包,并用flume做生产者,采集日志数据,用kafka做消费者来消费日志数据
- 基于AWS的Lambda+Alexa服务添加智能家居设备 (一)
- 角谷定理python输出变化过程_角谷定理。