什么是SPA?
SPA即单页面应用，是一种网站类型，它只有一个主页面，有多个页面片段，它是通过页面的动态重写来改变页面显示内容从而实现和用户的交互，由于用户从始至终实际上都是在同一个主页面上，仅仅是页面资源的不同装载和添加，也就是说单页面应用不会进行重新加载，只有在我们需要的时候才回去检索必要的html,css,js资源，所以用户不会因为页面切换而打断用户体验
与SPA不同还有一种网站类型MPA也需要了解
MPA翻译过来即多页面应用，是传统的一种网站模型，与SPA完全不同，它由多个主页面构成，每个页面都是主页面，每次访问不同页面都需要重新加载不同的html,css,js资源，因此会频繁进行页面切换
两者对比
SPA只有一个主页面，多个页面片段，MPA每个页面都是个主页面;刷新页面时，SPA采用局部刷新，MPA则是整页刷新;路由方面，SPA采用的是哈希模式，MPA采用的是历史模式;SPA在进行SEO时较为不方便，而MPA则有利于页面SEO；SPA在进行页面切换时相较MPA会快很多同时也更有利于维护
SPA的优缺点总结
优点：
- SPA页面页面切换快，流畅，不会重新加载整个页面，用户体验好
- 有利于前后端分离开发
缺点：
- 不利于SEO搜索引擎优化
- 首屏渲染较慢
原理
- 监听地址栏的hash变化跳转路由
- 用pushstate记录浏览器地址，驱动页面发送变化
ps: 如何给SPA做SEO
- 用SSR服务端渲染，将组件或页面在服务端生成html字符串返回给服务器
- 静态化
- 使用Phantomjs针对爬虫处理
如何针对SPA首屏渲染较慢的问题进行优化
首先分析加载慢可能的原因：
- 自己网慢
- 请求文件太大
- 请求重复发送多次
- 加载脚本时渲染内容堵塞了
通常有几种优化方案
- 缩小入口文件体积: 即路由懒加载，动态加载路由组件，用函数的写法，在请求时让他们分开打包，这样入口文件就变小了，因此加载速度理所当然快了
- 静态资源本地缓存： 在后端方面，在响应头中设置cache-control,last-modified,Etag等,让优化一下协商缓存，这样就可以让强缓存中资源不在每次过期时都去重新请求；前端方面则可以利用localStorage等本地存储来优化
- ui框架按需加载 在我们使用elementUI或vant等这些组件库时不全局导入而选择按需导入，减小体积
- 图片资源压缩 将图片资源做成雪碧图，或者icon使用线上图标库，减小请求压力
- 使用SSR SSR，也就是服务端渲染，组件或页面通过服务器生成html字符串，再发送到浏览器 （使用Nuxt.js）
