SPA单页面优缺点

Posted captainmforlife

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了SPA单页面优缺点相关的知识,希望对你有一定的参考价值。

 

SPA:概念
spa指的是single page application 是一种特殊的 Web 应用,就是只有一张Web页面的应用, 它将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的htmljavascript 和 CSS。一旦页面加载完成了,SPA不会因为用户的操作而进行页面的重新加载或跳转。取而代之的是利用 JavaScript 动态的变换HTML的内容,从而实现UI与用户的交互。由于避免了页面的重新加载,SPA 可以提供较为流畅的用户体验。但是,对单页应用来说模块化的开发和设计显得相当重要。
优点:
1. 良好的交互体验,不刷新,减少 请求  数据ajax异步获取 页面流程;用户体验好、快,内容的改变不需要重新加载整个页面
             前端进行的是局部的渲染,避免了不必要的跳转和重复的渲染
2.前后端分离,前端负责view,后端负责model,各司其职; 架构清晰
3.减轻服务端压力
             服务器只需要提供数据,不需要管前端的展示逻辑和页面合成,提高了 性能
               SPA应用中服务器可以先将一份包含静态资源(HTML CSS JS等)的静荷数据(payload)发送给客户端,之后客户端只需要获取渲染页面或视图数据即可,
4.共用一套后端程序代码,设配多端
         不用修改后端程序代码就可以同时适配用于web界面、手机、平板等多种客户端;无需考虑兼容
5.可以缓存较多数据,减少服务器压力
缺点:
1. 首次加载时间过长
         为实现单页Web应用功能及显示效果,需要在加载页面时将js、CSS统一加载,部分页面按需加载。
2. SEO(搜索引擎优化)难度高  
           由于整个页面中网页中没有html,不利于 SEO搜索引擎抓取,
3.页面复杂度提高很多,复杂逻辑难度成倍,开发难度较高
         由于后端只提供数据而不再管前端的展示逻辑和页面合成,所以这些展示逻辑和页面合成都需要在前端进行编写(前进、后退等),所以会大大提高页面的复杂性和逻辑的难度
 
解决办法1.:VUE  SSR  只是解决SEO问题;
解决方法2.:路由图片、懒加载、js按需加载、使用cdn、js放在body后边、压缩代码、移除console 、debugger;
                   异步组件(const  aa=resolve =>require([‘../xxx/xx‘]),resolve)
     修改webpack配置 、添加登录专用的router配置   
 

以上是关于SPA单页面优缺点的主要内容,如果未能解决你的问题,请参考以下文章

SPA单页面优缺点

说说你对 SPA 单页面的理解,它的优缺点分别是什么?

单页面应用学习

单页面应用(SPA)

单页面和多页面的 区别

单页面应用SPA和多页面应用MPA