SPA 的概念

Posted 2023-04-18

参考技术A 一、什么是SPA（SPA 的概念）

　　　　单页 Web 应用 (single-page application 简称为 SPA)，简单理解为：仅仅在web页面初始化时加载相应的html、javascript、CSS，一旦页面加载完成了，SPA不会因为用户的操作而进行页面的重新加载或跳转，而是利用 JavaScript 动态的变换HTML的内（采用的是div切换显示和隐藏），从而实现UI与用户的交互。

二、SPA的优缺点

　　　　1、优点：

　　　　　　（1）由于避免了页面的重新加载，SPA 可以提供较为流畅的用户体验。得益于ajax，我们可以实现无跳转刷新，又多亏了浏览器的histroy机制，我们用hash的变化从而可以实现推动界面变化。

　　　　　　（2）只要使用支持HTML5和CSS3的浏览器就可以执行复杂的SPA,因此，开发人员不必为了写SPA网站而特别学习另一个开发方式，而使用者也不额外安装软件，所以，让开发SPA网页程序的入门和使用门槛降低不少。

　　　　2、缺点：

　　　　　　以SPA方式开发的网站不容易管理也不够安全。因为没了一页一页的网页给搜索引擎的爬虫来爬，所以，在搜索引擎最佳化（SEO）的工作上，需要花费额外的功夫。因为没有换页，需要自定义状态来取代传统网页程序以网址来做判断。

SPA单页面优缺点

 

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配置