什么是 SPA？它是如何工作的？

SPA (Single Page Application) 是一种通过单次加载 HTML、CSS 和 JavaScript，后续内容由 JavaScript 动态更新页面的 Web 应用开发模式。以下从机制和特性进行说明：

---

1. 核心机制

• 路由控制（关键）
  利用前端路由（如 Vue Router、React Router）监听 URL 变化，直接渲染不同组件而非刷新页面。
  参考实现：

  // 简单路由管理示例
  window.addEventListener('hashchange', () => {
   const route = location.hash.slice(1); // 获取 hash 值
   renderComponent(route); // 动态渲染对应组件
  });
  

• 异步数据驱动
  页面内容通过 Ajax/Fetch 与后端 API 通信获取数据，结合客户端框架（Vue/React）实现局部刷新。

---

2. 核心优势

• ⚡ 无缝用户体验
  操作无需整页刷新，交互流畅接近原生应用。
• 🧩 前后端解耦
  后端仅提供数据接口，UI 渲染逻辑完全由前端 JavaScript 处理。
• 📉 服务器压力优化
  初始仅请求静载资源，后续仅传输数据量极小的 JSON，服务器吞吐效率提升。

---

3. 主要缺陷

• 🐢 首屏加载性能压力
  因需一次性打包加载所有核心 JS/CSS（如 Webpack 打包文件），网络速度受限时体验下降。
• 🔍 SEO 兼容困难
  搜索引擎难以爬取由 JavaScript 动态生成的页面内容（需配合 SSR 或预渲染弥补）。
• ↩️ 需手动实现浏览器历史管理
  原生前进/后退功能失效，需开发者通过 history.pushState() 等技术自主维护导航栈。

工业实践中，通过代码分割（Code Splitting）按需加载、服务端渲染（SSR）优化 SEO 、缓存策略提升效率等方式优化体验问题。