2.3-SPA介绍

Create by fall on -- -- 2020 Recently revised in 04 Jan 2024

	CSR（Client-side Rendering）	SSR（Server-Side Rendering）	SSG（Static Site Generation）
主要逻辑运行端	浏览器	服务器	浏览器（很少的 JS 脚本）
静态文件	单页面，浏览器需要先处理，再展示	由服务器即时生成，首屏加载速度非常快	多个页面分别读取，极快
SEO	不适合	适合	适合
静态文件 CDN	适合	不适合	适合
适用场景	中后台产品，优化动态网站体验	信息展示型网站	静态网站生成和托管，资讯类网站

Single Page Application

单页面应用程序，整个网站只有一个页面，是指在浏览器中运行的应用。通过 ajax 实现局部刷新，同时支持浏览器的前进后退功能。

单页应用的模式便于你在多个端共用 API，可以显著减少服务端的工作量。容易变化的 UI 部分都已经前置到了多端，只受到业务数据模型影响的 API，更容易稳定下来，便于提供更棒的服务。

实现方法：基于 URL 中的哈希值（由于哈希值的变化，会导致浏览器的浏览记录的变化，但是不会触发页面的渲染）

SPA 属于 CSR，大量工作在客户端执行，SSR 大量工作在服务端执行。

代码隔离

SPA 需要做到代码隔离，不同页面（组件）之间有不同的模板，需要进行隔离，如果不进行隔离，会出现模板间的冲突。

冲突主要出现在 id 上，不同页面拥有不同 id，则会导致出现相同的 id，导致不可预见的后果

加载策略

保证首次页面渲染时间

把更多的公共功能放在首次加载，以减小每次加载的在入量

传统页面：如果出现复用代码，一般会提取成相应的文件，并且按照每个页面的要求进行合并

单页应用：如果代码总量不大，可以整体打包一次，如果过大，考虑运行时加载，加载粒度可以搞得比较大，不同块之间没有重复的部分

路由与状态的管理

如果一个功能需要多次点击才能实现，如何将这个功能分享给他人？

哈希值，就是类似于跳转 id 时使用的东西

每一次改变 # 后的部分，都会在浏览器的访问历史中增加一个记录，使用"后退"按钮，就可以回到上一个位置。

这对于 ajax 应用程序特别有用，可以用不同的 # 值，表示不同的访问状态，然后向用户给出可以访问某个状态的链接。

产品功能划分为若干状态，每个状态映射到相应的路由，然后通过 pushState 这样的机制，动态解析路由，使之与功能界面匹配。

缓存和本地存储

由于系统几乎全是静态文件，可以利用浏览器的缓存机制，加载优化

内存管理

单页应用可能被用户打开一整天，所以要对里面的 DOM 操作，内存管理，网络连接格外小心

样式规划

基准样式的分离

样式的重设、全局字体的设置、布局的基本约定和响应式支持

组件样式的划分

首先是各种界面组件及其子元素的样式，其次是一些修饰样式。组件样式应当尽量减少互相依赖，各组件的样式允许冗余。

堆叠次序的管理

需要提前为各种UI组件规划堆叠次序，也就是z-index，比如说，我们可能会有各种弹出对话框，浮动层，它们可能组合成各种堆叠状态

缺陷

• 单页应用最根本的缺陷就是不利于 SEO，由于大部分都是动态生成的，所以搜索引擎很不容易索引它。
• 首页加载速度更慢，因为页面中默认没有 DOM，需要先执行 JS，JS 渲染 DOM