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等传递 |
页面切换 | 快,对用户体验良好 | 慢,切换加载资源,用户体验差 |
维护成本 | 相对容易 | 相对复杂 |