SPA（单页应用）知多少

Posted 2023-03-10 恪愚

单页面应用程序将所有的活动局限于一个Web页面中，在该Web页面初始化时加载相应的html、javascript 和 CSS。一旦页面加载完成，单页面应用不会因为用户的操作而进行页面的重新加载或跳转。取而代之的是利用 JavaScript 动态的变换HTML的内容，从而实现UI与用户的交互。

单页面应用的优点

1. 良好的交互体验

单页应用的内容的改变不需要重新加载整个页面，获取数据也是通过Ajax异步获取，没有页面之间的切换，就不会出现“白屏现象”,也不会出现假死并有“闪烁”现象，页面显示流畅

2. 良好的前后端工作分离模式

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

3. 减轻服务器压力

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

单页应用的缺点及如何解决？

1. 首屏加载慢

解决方案：

• 路由懒加载/按需加载
• 组件懒加载/按需加载、异步加载组件

只有当路由被访问时才会加载对应的组件，而不是在加载首页的时候就加载，项目越大，对首屏加载的速度提升得越明显

• 使用CDN加速

在做项目时，我们会用到很多库，采用cdn加载可以加快加载速度。

• 服务端渲染

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

2. 不利于SEO

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

简单来讲，爬虫就是一个探测机器，它的基本操作就是模拟人的行为去各个网站溜达，点点按钮，查查数据，或者把看到的信息背回来。
爬虫是搜索引擎的！ 不是浏览器的！

解决方案：

• 服务端渲染
• 页面预渲染
• 路由采用h5 history模式

当我们说前端路由时，我们在说什么

在单页应用中，路由描述的是URL与视图之间的映射关系，这种映射是单向的，即URL变化会引起视图的更新。

在前端路由的使用中，你通常应该定义一个路由配置，它用于描述路径和组件的映射关系。拿 vue 来说，即渲染组件<router-view> 应该渲染什么路由组件。

总的来说，前端路由是基于 history 方法，操作历史堆栈但不实际跳页。监听器坚挺到路径变化会执行一个方法（pushWithRedirect），方法中根据 location 的 name 或者 path 找到指定位置的组件对象定义，然后渲染对应的组件。
其中，还会触发导航守卫。导航守卫主要是让用户在路径切换的生命周期中可以注入钩子函数，执行一些自己的逻辑，也可以取消和重定向导航。