概念篇：ReactJS + AppSync + DynamoDB 性能优化核心概念

1️⃣ DynamoDB 设计理念

核心原则

1. 访问模式驱动（Access Pattern Driven Design）

   • DynamoDB 查询性能取决于表结构。

   • 设计表之前，先明确应用的访问模式（用户需求）。

   • 例子：

     • 按用户获取订单 → PK = USER#<userId>, SK = ORDER#<orderId>

     • 查询状态为“待发货”的订单 → GSI1PK = STATUS#<status>, GSI1SK = CREATED_AT

   • 优点：查询高效，避免全表扫描。

2. 单表设计（Single Table Design）

   • 将不同类型数据存储在同一张表，通过 PK + SK 区分。

   • 优点：减少 Join，减少 Scan，提高查询性能。

   • 注意：需要规范 PK/SK 命名，便于 GSI 或 LSI 使用。

3. 索引设计

   • GSI（Global Secondary Index）：支持全局查询，适合不同 Partition Key 的访问模式。

   • LSI（Local Secondary Index）：支持同一 Partition Key 下排序或额外查询条件。

   • 优点：可以覆盖不同查询条件，不用 Scan。

   • 注意：GSI 和 LSI 有吞吐量和存储成本，需按访问频率设计。

4. 避免 Scan

   • Scan 全表遍历，返回大量无关数据，性能低。

   • Query + Key / GSI 可以直接定位数据。

   • Scan 可用于后台批处理或数据迁移。

5. 分区与吞吐量

   • Partition Key 决定数据分区，高基数 Key 避免热点。

   • 可选 On-demand 模式或固定 RCU/WCU。

   • 优点：高可用、自动扩展，无需运维。

6. 事务与一致性

   • DynamoDB 支持 ACID 事务（限制 25 条记录）。

   • 注意高并发时事务成本高，应尽量按 Key 操作。

---

2️⃣ 前端缓存

核心概念

• 缓存是前端减少重复网络请求、提高渲染性能的重要手段。

• 主要工具：

  1. Apollo Client

     • 内存缓存，可持久化。

     • 支持分页加载、乐观更新、虚拟列表结合。

  2. Amplify DataStore

     • 本地持久化缓存 + 离线支持。

     • 自动同步到 AppSync / DynamoDB。

     • 支持实时订阅和离线 CRUD。

优点

• 减少重复请求。

• 提升滚动列表和分页加载的性能。

• 支持离线场景（DataStore）。

---

3️⃣ 分页加载（Pagination）

核心概念

• 分页加载是处理大数据量列表的常用策略。

• DynamoDB 使用 Limit + LastEvaluatedKey 实现分页。

• 前端每次只加载一页数据（可视区域或稍多一点）。

优点

• 减少单次查询量，提高响应速度。

• 前端渲染压力降低。

• 网络请求均匀分布，避免峰值延迟。

---

4️⃣ 虚拟列表（Virtualized List）

核心概念

• 前端只渲染可视区域的列表项，滚动时动态加载其他项。

• 常用库：

  • react-window

  • react-virtualized

优点

• 极大降低大列表渲染压力。

• 和分页加载结合，减少前端内存消耗。

• 用户滚动体验更流畅。

---

5️⃣ 批量写入（Batch Write）

核心概念

• DynamoDB 支持批量写入 (BatchWriteItem) 每批最多 25 条记录。

• 前端可先缓存数据，再批量提交。

优点

• 减少网络请求次数。

• 避免高并发写入导致吞吐量限制（throttling）。

• 提高写入效率。

注意

• 写入批量过大需拆分。

• 配合 WCU 调整或 On-demand 模式。

---

6️⃣ 防抖滚动（Debounce / Throttle Scroll）

核心概念

• 滚动事件高频触发，直接发网络请求会造成性能瓶颈。

• 防抖（debounce）：停止滚动一定时间后才触发。

• 节流（throttle）：固定时间间隔触发一次。

优点

• 降低重复请求。

• 减少前端渲染压力。

• 和分页 + 虚拟列表结合，提升滚动体验。

---

7️⃣ 订阅优化（Subscriptions）

核心概念

• AppSync 支持 GraphQL Subscriptions，实现前端实时更新。

• 高并发或高频数据更新可能导致 WebSocket 延迟。

优化策略

1. 订阅过滤：

   • 仅订阅必要 Partition Key / 类型。

2. 批量更新前端：

   • 高频变化字段做 debounce，减少 UI 更新次数。

3. 配合 DAX / Response Cache：

   • 热点数据缓存，提高读取速度。

---

✅ 总结概念篇核心思路

1. 先设计访问模式再建表 → 高效查询。

2. 前端只请求必须数据 → 缓存 + 分页 + 虚拟列表。

3. 批量操作与防抖 → 降低高并发压力。

4. 订阅优化 + 缓存 → 保证实时性同时性能可控。

5. 工具组合：

   • Apollo / DataStore → 缓存与离线

   • Virtualized List → 大列表渲染

   • Batch Write → 高效写入

   • Debounce / Throttle → 滚动优化

   • DAX / Response Cache → 热点数据缓存