SPA单页面优缺点

Posted 2022-06-08 captainmforlife

 

SPA:概念

spa指的是single page application 是一种特殊的 Web 应用，就是只有一张Web页面的应用， 它将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的html、javascript 和 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配置