跳到主要内容

谈谈你对 SPA 单页面的理解

面试速答（30 秒版 TL;DR）​

  • SPA（Single Page Application）：只有一个 HTML 入口页，路由切换主要靠前端（History / Hash）+ 局部渲染，不整页刷新。
  • 优点：交互更顺滑；公共资源可缓存；前后端解耦清晰。
  • 缺点：首屏可能更慢；SEO 需要 SSR/预渲染；路由与状态管理更复杂；更依赖 JS 运行环境。
  • 一句话：MPA 是“多页跳转”，SPA 是“同一页内换内容”，用路由和组件来组织页面。

心智模型：浏览器发生了什么变化​

MPA（多页应用）​

  • 点击链接 -> 发起新请求 -> 服务端返回新 HTML -> 浏览器整页解析与渲染。
  • 每次跳转都会丢掉大部分运行时状态（除非写入 URL / Storage）。

SPA（单页应用）​

  • 首次进入下载：HTML + JS + CSS（以及首屏数据）。
  • 后续“跳转”：
    • URL 变化（History API pushState/replaceState 或 hash）
    • 前端路由匹配组件树
    • 拉取该路由所需数据
    • 触发组件更新，完成局部渲染

关键点：为什么 SPA 首屏更慢​

  • SPA 首屏往往要先下载并执行更多 JS（框架运行时、路由、状态管理、业务代码）。
  • 缓解思路（面试常追问）：
    • 代码分割/路由懒加载（只下载当前路由）
    • 按需加载、Tree Shaking、减少第三方依赖
    • SSR（服务端渲染）/SSG（静态生成）/预渲染 提升首屏与 SEO
    • 合理的缓存策略（HTTP 缓存、Service Worker）

SEO 怎么办（高频追问）​

  • 纯 SPA：爬虫可能拿到的是空壳 HTML，SEO 难。
  • 解决：
    • Vue：SSR（例如 Nuxt）或 SSG/预渲染
    • 对少量核心页面：做 Prerender（构建时生成 HTML）

常见坑​

  • 前进/后退：要正确处理 popstate/hashchange，保证状态恢复。
  • 首屏白屏：JS 体积、同步初始化过重、长任务阻塞。
  • 路由鉴权：前端鉴权只能做“体验优化”，真正的权限还是服务端校验。