vue 单页应用和多页应用的优劣


Posted in Javascript onOctober 22, 2020

多页应用

每一次页面跳转的时候,后台服务器都会给返回一个新的html文档,这种类型的网站也就是多页网站,也叫做多页应用。

vue 单页应用和多页应用的优劣

为什么多页应用的首屏时间快?

首屏时间叫做页面首个屏幕的内容展现的时间,当我们访问页面的时候,服务器返回一个html,页面就会展示出来,这个过程只经历了一个HTTP请求,所以页面展示的速度非常快。

为什么搜索引擎优化效果好(SEO)?

搜索引擎在做网页排名的时候,要根据网页内容才能给网页权重,来进行网页的排名。搜索引擎是可以识别html内容的,而我们每个页面所有的内容都放在Html中,所以这种多页应用,seo排名效果好。

但是它也有缺点,就是切换慢

因为每次跳转都需要发出一个http请求,如果网络比较慢,在页面之间来回跳转时,就会发现明显的卡顿。

单页应用

第一次进入页面的时候会请求一个html文件,刷新清除一下。切换到其他组件,此时路径也相应变化,但是并没有新的html文件请求,页面内容也变化了。
原理是:JS会感知到url的变化,通过这一点,可以用js动态的将当前页面的内容清除掉,然后将下一个页面的内容挂载到当前页面上,这个时候的路由不是后端来做了,而是前端来做,判断页面到底是显示哪个组件,清除不需要的,显示需要的组件。这种过程就是单页应用,每次跳转的时候不需要再请求html文件了。

vue 单页应用和多页应用的优劣

为什么页面切换快?

页面每次切换跳转时,并不需要做html文件的请求,这样就节约了很多http发送时延,我们在切换页面的时候速度很快。

缺点:首屏时间慢,SEO差

单页应用的首屏时间慢,首屏时需要请求一次html,同时还要发送一次js请求,两次请求回来了,首屏才会展示出来。相对于多页应用,首屏时间慢。
SEO效果差,因为搜索引擎只认识html里的内容,不认识js的内容,而单页应用的内容都是靠js渲染生成出来的,搜索引擎不识别这部分内容,也就不会给一个好的排名,会导致单页应用做出来的网页在百度和谷歌上的排名差。

有这些缺点,为什么还要使用Vue呢?

Vue还提供了一些其它的技术来解决这些缺点,比如说服务器端渲染技术(我是SSR),通过这些技术可以完美解决这些缺点,解决完这些问题,实际上单页面应用对于前端来说是非常完美的页面开发解决方案。

新的更新

最近在改造公司的项目,公司的项目是单页应用,可能会改成多页应用,所以对这块又重新看了一下。在网上看到一个表格觉得总结的很到位,贴过来。我是表格出处

mm 多页应用模式MPA 单页应用模式SPA
应用构成 由多个完整页面构成 一个外壳页面和多个页面片段构成
跳转方式 页面之间的跳转是从一个页面跳转到另一个页面 页面片段之间的跳转是把一个页面片段删除或隐藏,加载另一个页面片段并显示出来。这是片段之间的模拟跳转,并没有开壳页面
跳转后公共资源是否重新加载
URL模式 http://xxx/page1.html  http://xxx/page1.html http://xxx/shell.html#page1  http://xxx/shell.html#page2
用户体验 页面间切换加载慢,不流畅,用户体验差,特别是在移动设备上 页面片段间的切换快,用户体验好,包括在移动设备上
能否实现转场动画 无法实现 容易实现(手机app动效)
页面间传递数据 依赖URL、cookie或者localstorage,实现麻烦 因为在一个页面内,页面间传递数据很容易实现
搜索引擎优化(SEO) 可以直接做 需要单独方案做,有点麻烦
特别适用的范围 需要对搜索引擎友好的网站 对体验要求高的应用,特别是移动应用
搜索引擎优化(SEO) 可以直接做 需要单独方案做,有点麻烦
开发难度 低一些,框架选择容易 高一些,需要专门的框架来降低这种模式的开发难度

以上就是vue 单页应用和多页应用的优劣的详细内容,更多关于vue 单页应用和多页应用的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
JavaScript CSS修改学习第六章 拖拽
Feb 19 Javascript
基于jQuery的公告无限循环滚动实现代码
May 11 Javascript
node.js中的fs.lchownSync方法使用说明
Dec 16 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
May 14 Javascript
javascript的 {} 语句块详解
Feb 27 Javascript
js实现增加数字显示的环形进度条效果
Feb 05 Javascript
干货!教大家如何选择Vue和React
Mar 13 Javascript
vue-loader教程介绍
Jun 14 Javascript
使用socket.io制做简易WEB聊天室
Jan 02 Javascript
详解小程序输入框闪烁及重影BUG解决方案
Aug 31 Javascript
vue+elementui 对话框取消 表单验证重置示例
Oct 29 Javascript
vue+ESLint 配置保存 自动格式化代码
Mar 17 Javascript
Javascript Symbol原理及使用方法解析
Oct 22 #Javascript
多个Vue项目部署到服务器的步骤记录
Oct 22 #Javascript
针对Vue路由history模式下Nginx后台配置操作
Oct 22 #Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
Oct 22 #Javascript
ES11屡试不爽的新特性,你用上了几个
Oct 21 #Javascript
记一次vue跨域的解决
Oct 21 #Javascript
解决Vue项目中tff报错的问题
Oct 21 #Javascript
You might like
php全局变量和类配合使用深刻理解
2013/06/05 PHP
php中调用其他系统http接口的方法说明
2014/02/28 PHP
使用laravel和ECharts实现折线图效果的例子
2019/10/09 PHP
Aster vs Newbee BO5 第二场2.19
2021/03/10 DOTA
Javascript 日期处理之时区问题
2009/10/08 Javascript
javascript new后的constructor属性
2010/08/05 Javascript
js中onload与onunload的使用示例
2013/08/25 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
2013/09/25 Javascript
利用函数的惰性载入提高javascript代码执行效率
2014/05/05 Javascript
jQuery网页右侧广告跟随滚动代码分享
2020/04/20 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
2016/09/20 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
2016/10/24 Javascript
JS实现旋转木马式图片轮播效果
2017/01/18 Javascript
jquery.tableSort.js表格排序插件使用方法详解
2020/08/12 Javascript
canvas绘制爱心的几种方法总结(推荐)
2017/10/31 Javascript
Bootstrap实现翻页效果
2017/11/27 Javascript
Vue脚手架的简单使用实例
2018/07/10 Javascript
在Vue中使用icon 字体图标的方法
2019/06/14 Javascript
JavaScript定时器使用方法详解
2020/03/26 Javascript
vant 时间选择器--开始时间和结束时间实例
2020/11/04 Javascript
[03:11]2014DOTA2国际邀请赛-VG掉入败者组 独家专访357
2014/07/19 DOTA
python抓取豆瓣图片并自动保存示例学习
2014/01/10 Python
CentOS 6.X系统下升级Python2.6到Python2.7 的方法
2016/10/12 Python
Python实现的网页截图功能【PyQt4与selenium组件】
2018/07/12 Python
浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器
2019/03/11 Python
Python判断对象是否为文件对象(file object)的三种方法示例
2019/04/26 Python
python生成requirements.txt的两种方法
2019/09/18 Python
西班牙国家航空官方网站:Iberia
2017/11/16 全球购物
Linux机考试题
2015/10/16 面试题
信号量和自旋锁的区别?如何选择使用?
2015/09/08 面试题
优秀应届生求职信
2014/06/16 职场文书
竞选大学学委演讲稿
2014/09/13 职场文书
庆祝儿童节标语
2014/10/09 职场文书
2015年挂职干部工作总结
2015/05/14 职场文书
观后感格式
2015/06/19 职场文书
2016年寒假社会实践活动总结
2015/10/10 职场文书