SPA单页面应用

1、SPA是什么？

SPA(Single-Page Application)是一种网络应用程序或网站的模型，它通过动态重写当前页面来与用户交互，这种方法避免了页面之间的切换会打断用户的体验。

单页面应用程序将所有的活动局限于一个web页面中，在该web页面初始化时加载相应的HTML，JavaScript和CSS。一旦页面加载完成，单页面应用不会因为用户的操作而进行页面的重新加载或跳转。取而代之的是使用JavaScript动态地变换HTML的内容，从而实现UI与用户的交互。由于避免了页面的重新加载，单页面应用可以给用户提供良好的体验。

在单页面应用中，所有必要的代码（HTML、CSS、JavaScript）都通过这个单页面的加载而检索，或者根据需要（通常是为响应用户操作）动态装载适当的资源并添加到页面。页面在任何时间点都不会重新加载，也不会将控制转移到其他页面。

熟知的js框架如Vue、React、Angular、Ember都属于SPA。

2、SPA的优缺点

优点：

（1）良好的用户体验

因为单页面内容的改变不需要重新加载整个页面，获取数据也是通过Ajax异步获取，没有页面之间的切换不会也就出现白屏现象，也不会出现假死并有闪烁现象，页面显示流畅。用户体验好、快，内容的改变不需要重新加载整个页面；

（2）良好的前后端分离，分工更明确；

后端不再负责模板渲染、输出页面等工作，后端API通用化，即同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端。

（3）减轻服务器压力；

单页面应用相对服务器压力小，服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍。

（4）具有桌面应用的即时性、网站的可移植性和可访问性。

缺点和对应的解决方案：

（1）不利于Seo搜索引擎的抓取

SEO本质是一个服务器向另一个服务器发起请求，解析请求内容。但一般来说搜索引擎是不会执行js代码的。搜索引擎爬虫的原理就是抓取url，然后通过url获取到html源码并解析。如果一个单页面应用中，搜索引擎获取到的html是模型页面而不是最终数据的渲染页面，就很不利于内容被搜索引擎搜索到。

解决方案：

• 服务端渲染：服务器合成完整的HTML到浏览器

• 路由使用h5 history模式

• 页面预渲染

（2）首次渲染速度相对较慢

解决方案：

• vue-router懒加载：就是按需加载组件，只有当路由被访问时才会加载相应的组件，而不是在加载首页的时候就加载，项目越大，对首屏加载的速度提升得越明显。

• 使用CDN加速：在做项目时，我们会用到很多库，使用CDN加载就可以加快加载速度。

• 异步加载组件

异步加载的方法：

//懒加载
()=>import(地址）
//使用require
components:{
    'Home':()=>resolve=>{
        require(['./home',resolve])
}

• 服务端渲染：服务端渲染还可以对SEO搜索优化起到作用，有利于搜索引擎抓取更多有用的信息（如果页面纯前端渲染，搜索引擎抓取到的就只是空页面）

（3）不适合开发大型项目

大型项目中可能会涉及到大量的DOM操作、复杂的动画效果，也就不适合使用Vue、React框架进行开发。

3、单页面应用SPA和多页面应用MPA的区别

单页面应用和多页面应用的区别：

	单页面	多页面
组成	由一个主页面和多个页面片段	由多个主页面组成
刷新方式	局部刷新	整体刷新
url模式	hash模式	history模式
SEO搜索引擎优化	难实现的，可以通过SSR方式改善	容易实现的
数据传递	容易	通过url、local storage、cookie等传递
页面切换	快，对用户体验良好	慢，切换加载资源，用户体验差
维护成本	相对容易	相对复杂