[vue] 说说你对SPA单页面的理解,它的优缺点分别是什么?
Activity
Zjingbo commentedon Jul 2, 2019
介绍:SPA应用就是一个web应用,可理解为:是一种只需要将单个页面加载到服务器之中的web应用程序。当浏览器向服务器发出第一个请求时,服务器会返回一个index.html文件,它所需的js,css等会在显示时统一加载,部分页面需要时加载。
优点:
1.良好的交互式体验。意思是:用户无需刷新页面,获取数据通过异步ajax获取,页面显示流畅
2.良好的前后端分离模式(MVVM),减轻服务端压力。服务器只需要输出数据就可以,不用管逻辑和页面展示,吞吐能力会提高几倍
3.共用同一套后端程序代码,不用修改就可用于web界面,手机和平板等客户端设备
缺点:
1.不利于SEO优化
2.由于单页应用在一个页面中显示,所以不可以使用浏览器自带的前进后退功能,想要实现页面切换需要自己进行管理
3.首屏加载过慢(初次加载耗时多),原因是:为了实现单页web应用功能及展示效果,在页面初始化的时候就会将js,css等统一加载,部分页面在需要时加载。当然也有解决方法。
解决方法:①使用路由懒加载 ②开启Gzip压缩 ③使用webpack的externals属性把不需要的库文件分离出去,减少打包后文件的大小 ④使用vue的服务端渲染(SSR)
举例spa应用:网易云音乐、QQ音乐等
Cai-zhiji commentedon Jul 7, 2023
SPA(Single-Page Application)即单页面应用,是一种以Web页面为基础的应用程序架构模式。它通过使用AJAX和DOM操作,实现在单个HTML页面中加载并切换不同的内容,而无需进行整个页面的刷新。
优点
良好的用户体验: SPA通过使用前端路由,实现快速响应和流畅的页面切换,提供了良好的用户体验。
快速加载: SPA在首次加载时会加载所有所需的资源(JavaScript、CSS等),之后的页面切换只需获取数据而不需要重新加载整个页面,从而减少了网络请求和加载时间。
良好的前后端分离: SPA使用前后端分离的架构模式,前端负责展示和交互逻辑,后端负责提供API接口和数据服务,使得前后端开发可以并行进行,提高了开发效率。
丰富的交互体验: 由于SPA可以通过前端技术实现复杂的交互逻辑和动画效果,提供了更丰富的用户交互体验。
缺点
首次加载较慢: 由于SPA在首次加载时需要下载所有所需资源,因此首次加载可能会比较慢,特别是对于较大的应用程序。
SEO不友好: 由于SPA的内容是通过JavaScript动态渲染的,搜索引擎的爬虫不易获取到完整的页面内容,对于SEO(搜索引擎优化)可能会有一定的影响。
前端逻辑复杂: SPA通常需要前端负责更多的业务逻辑和数据处理,对前端开发者的技能要求较高。
资源占用较高: SPA在运行时需要占用较多的内存资源,特别是对于复杂的应用程序,可能导致内存占用较高。