SPA 的理解（单页面富应用）

一、什么是 SPA

SPA（single-page application），翻译过来就是单页应用。

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

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

我们熟知的 JS 框架如 react、vue、angular、ember 都属于 SPA。

二、SPA 和 MPA 的区别

多页应用 MPA（MultiPage-page application），每个页面都是一个主页面，都是独立的。当我们访问另一个页面时，都需要重新加载 html、css、js 文件，公共文件则根据需求按需加载。

单页应用与多页应用的区别

维度SPAMPA
组成一个外壳页面 + 多个片段多个完整页面
体验切换快，类原生切换需要重新加载，白屏明显
SEO较差（需 SSR / 预渲染补救）天然友好
维护组件化维护方便重复模板多，维护成本高
适用场景应用型 / 后台型内容型 / 展示型

单页应用优缺点

优点：

  • 用户体验好、快，内容的改变不需要重新加载整个页面。
  • 前后端分离，服务端只负责提供数据，前端负责视图渲染。
  • 减轻服务器压力。

缺点：

  • 首屏加载慢（所有资源一次性加载）。
  • 不利于 SEO（需要额外方案）。
  • 页面复杂度提高。

三、实现一个 SPA

原理

通过监听 url 的变化（hashchange 或 popstate 事件），匹配路由规则，按需加载对应组件并渲染到指定容器中。

// hash 模式简易实现
window.addEventListener('hashchange', () => {
  const hash = location.hash.slice(1)
  renderComponent(routes[hash])
})

四、题外话：如何给 SPA 做 SEO

1. 网站结构优化

尽量扁平化：网站主导航中页面越多，网站越扁平化，越扁平化的网站越有利于搜索引擎蜘蛛的爬行和抓取。

2. 关键词优化

合理布局关键词。

3. 内容质量提高

搜索引擎越来越重视内容质量。

4. 语义化

HTML5 语义化标签有利于搜索引擎理解页面结构。

基于 Vue 的 SPA 实现 SEO 的三种方式

1. SSR（服务端渲染）

将组件或页面通过服务器生成 html，再返回给浏览器，如 Nuxt.js。

2. 静态化

目前主流的静态化主要有两种：

  • 一种是通过程序将动态页面抓取并保存为静态页面，这样的页面实际存在于服务器的硬盘中。
  • 另一种是通过 Web 服务器的 URL Rewrite 方式。它的原理是通过 web 服务器内部模块按一定规则将外部的 URL 请求转化为内部的文件地址，一句话来说就是把外部请求的静态地址转化为实际的动态页面地址，而静态页面实际是不存在的。

这两种方法都达到了实现 URL 静态化的效果。

3. 使用 PhantomJS 针对爬虫处理

原理是通过 Nginx 配置，判断访问来源是否为爬虫，如果是则搜索引擎的爬虫请求会转发到一个 node server，再通过 PhantomJS 解析完整的 HTML，返回给爬虫。

来源整理自：vue3js.cn 面试官系列