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 相关文章推荐
js网页侧边随页面滚动广告效果实现
Apr 14 Javascript
javascript真的不难-回顾一下基础知识
Jan 15 Javascript
js 高效去除数组重复元素示例代码
Dec 19 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
Aug 24 Javascript
jQuery控制cookie过期时间的方法
Apr 07 Javascript
javascript日期计算实例分析
Jun 29 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
Jan 05 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
Feb 20 Javascript
vue2.0 computed 计算list循环后累加值的实例
Mar 07 Javascript
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
vue2.0父子组件间传递数据的方法
Aug 16 Javascript
vue-swiper的使用教程
Aug 30 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
咖啡机如何保养和日常清洁?
2021/03/03 冲泡冲煮
PHP文件上传主要代码讲解
2013/09/30 PHP
php实现发送微信模板消息的方法
2015/03/07 PHP
PHP实现简单日历类编写
2020/08/28 PHP
jQuery对象[0]是什么含义?
2010/07/31 Javascript
分享9点个人认为比较重要的javascript 编程技巧
2015/04/27 Javascript
js实现页面跳转的几种方法小结
2016/05/16 Javascript
利用Angularjs中模块ui-route管理状态的方法
2016/12/27 Javascript
d3.js实现立体柱图的方法详解
2017/04/28 Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
2017/09/30 Javascript
详解vue-cli3开发Chrome插件实践
2019/05/29 Javascript
微信小程序版本自动更新的方法
2019/06/14 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
2019/09/11 Javascript
浅析Vue下的components模板使用及应用
2019/11/27 Javascript
JS实现纵向轮播图(初级版)
2020/01/18 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
2020/03/20 jQuery
微信小程序连续签到7天积分获得功能的示例代码
2020/08/20 Javascript
jQuery实现图片切换效果
2020/10/19 jQuery
vue 项目@change多个参数传值多个事件的操作
2021/01/29 Vue.js
python中将函数赋值给变量时需要注意的一些问题
2017/08/18 Python
Python基于回溯法子集树模板解决野人与传教士问题示例
2017/09/11 Python
Python中format()格式输出全解
2019/04/12 Python
python模块常用用法实例详解
2019/10/17 Python
python打开音乐文件的实例方法
2020/07/21 Python
Python爬虫获取op.gg英雄联盟英雄对位胜率的源码
2021/01/29 Python
html标签之Object和EMBED标签详解
2013/07/04 HTML / CSS
英国户外装备商店:Ultimate Outdoors
2019/05/07 全球购物
俄罗斯三星品牌商店:GalaxyStore
2020/11/04 全球购物
用C语言实现文件读写操作
2013/10/27 面试题
临床医学专业毕业生的自我评价
2013/10/17 职场文书
联谊活动策划书
2014/01/26 职场文书
大宝sod蜜广告词
2014/03/21 职场文书
物流管理专业求职信
2014/05/29 职场文书
工地安全标语
2014/06/07 职场文书
开会通知
2015/04/20 职场文书
幼儿园开学通知
2015/04/24 职场文书