常见并发机制
手机端的长任务（Long Task）是电脑端的 12 倍。
一般来讲，任务执行策略分为三种。
Screen Shot 2022-11-12 at 12.40.38.png
平行 (Parallelism)
平行 (Parallelism)，即多个 task 同时在多个 CPU 执行。
在浏览器端通过 Worker 实现。有如下特点：
- 通过 Message-Passing 交换数据。
- 无法访问主页面的变量，主页面也无法访问 Worker 的变量
- 无法访问 DOM，或者十分的复杂
- 两种模式：Actors & Shared Memory
Actors
- 每个 Actor 全权负责自有数据。
- Actor 只能接受或者发送消息。
- 主线程是负责页面 UI 的一个 Actor
-
postMessage，触发并忘记的机制。 不关心，留存或者跟踪请求和相应的详细情况。 - 需要对两方面保持平衡，一方面是 worker 太少，某些 worker 可能太忙，导致发送的任务需要等待；另一方面是worker 太多，不同 Worker 沟通成本可能过高。
Shared Memory
- 通过 SharedArrayBuffer 共享内存。
- 通过
postMessage发送共享内存时，可以得到这块内存 （而不是复制）。 - 浏览器没有 API 来并发访问共享对象。
- 需要自己构建机制来并发访问共享对象，例如 mutex。
- 不能通过直观的 Object / Array 来访问内存，只能访问 bit 序列 级别的数据。
Web Assembly
- Shared Memory 的最佳实践
- 不如 Javascript 开发体验舒服
- 在 WASM 内部，可以获得较快的执行速度
- Javascript 在操作 DOM 时会比 WASM 快一些。例如 React 在操作 DOM 这方面比 WASM 原生支持要快。
Worker 和 WASM 知名库
- Atomics
- BufferBackedObject
- Comlink
- WorkerDOM
Worker
- 擅长数据处理和数值计算
- 难以处理 UI 相关事物
- 难以调度
并发 (Concurrency)
只有一个 CPU，通过时间分片执行多个任务。
时序调度 (Scheduling)
类似并发，不过有一个程序专门负责调度其他任务，例如制定任务优先级等。
React concurrency = Scheduling in React
主要机制
React 并发，指的是 React 的时序调度，包括一下主要特性：
- Heuristics 启发性：通过一个可中断渲染线程协调多任务。（Cooperative MultiTasking With a single interruptible rendering thread）
- Priority Levels 优先级：在浏览器上挂载不同优先级的回调。（Register callbacks with different priority levels in the browser）
- Render Lanes 渲染通道：通过位掩码实现的抽象。带来了(执行)粒度，避免透支，允许批处理。（Abstractions around bitmask; bring Granularity, Avoid Overhead & Allow Batching）
React 时序调度
- 多任务协调模型 （A Cooperative MultiTasking Model）
- 一个单一的可中断渲染线程 (A Single Interruptible Rendering Thread)
- 渲染过程可以被其他主线程任务（包括其他 React 渲染任务）中断
- 可以在后台更新，从而不阻塞相应输入
Heuristics 启发性
- 每 5ms 就让位给主线程 （React yields execution back to the main thread every 5 ms）
- 即使在 120 FPS 的设备上，也要小于一个时间片，不会阻塞动画 （It's smaller than a single frame even on 120 FPS, so it won't block animation）
- 事实上，渲染是可中断的。
Priority Level 优先级
react / scheduler / src / SchedulerPriorities.js
export type PriorityLevel = 0 | 1 | 2 | 3 | 4 | 5;
export const NoPriority = 0;
export const ImmediatePriority = 1;
export const UserBlockingPriority = 2;
export const NormalPriority = 3;
export const LowPriority = 4;
export const IdlePriority = 5;
| 优先级 | 超时 | 时机 |
|---|---|---|
| Immediate | 同步执行 (Synchronously) | 需要立即执行的任务 |
| UserBlocking | 250ms | 用户操作产生的结果 (例如按钮点击) |
| Normal | 5S | 无需实时的更新 |
| Low | 10S | 可以延迟却必须完成的任务 (例如某些页面通知) |
| Idle | 无延迟 | 根本无需执行的任务 (例如屏幕外的更新) |
Render Lanes 渲染通道
Render Lanes 是在位掩码上构建的一种抽象。
- 一个通道 (Lane) - 位掩码中的一位
- React 的一次更新 = 一个通道
- 相同通道的更新在一个批次 (batch) 执行，不同的通道在不同的批次执行。
- 因为是通过位实现的，粒度最多有 31 级
- 多状态转换 ( Multiple Transitions ) 可以选择是单一的批次，或者相互独立执行。
- 减少一些场景下的消耗，例如多次布局，样式计算或者多次浏览器绘图 (paint)
有啥用
可以使用 useTransition 处理大量数据。
能绘制更多的数据点，或在 canvas 上绘制，或者进行数据处理
- useTransition 效果比 worker + redux-saga + debounce 强。
- useTransition 效果比 虚拟渲染(Virtualization) 和 缓存(Memorization) 强
使用 useSyncExternalStore 防止无用的渲染
function Pathname() {
const { pathname } = useLocation();
return <Badge title={pathname} subTitle="pathname" />;
}
function Hash() {
const { hash } = useLocation();
return <Badge title={hash} subTitle="hash" />
}
通过 const { hash } = useLocation();，即使是 hash 没有变化，location 的其他部分有变化，后续组件也会重新渲染。
可以通过一个新的 hook 来提升效能。
function usHistorySelector(selector) {
const history = useHistory();
return useSyncExternalStore(history.listen, () => selector(history));
}
function Pathname() {
const pathname = usHistorySelector(history => history.location.pathname);
return <Badge title={pathname} subTitle="pathname" />;
}
function Hash() {
const pathname = usHistorySelector(history => history.location.hash);
return <Badge title={hash} subTitle="hash" />
}
通过选择性的 hydration 和 React 并发 提升 hydration 效能
以前必须全部 hydration 才可以，现在可以选择性的 hydration。原来快的组件需要等慢的组件，现在也无需等待。
更强大的分析器，检查 Transition，得到更多 Warns，以及更多
Screen Shot 2022-11-13 at 16.06.34.png
展望
- 使用
react-fetch进行 I/O - 原生支持的
<Cache />以用来数据获取，可以与<Suspense />配合使用。 -
<Suspense>可以跳过 CPU 消耗过多的 DOM 树 -
useInsertionEffect来插入 CSS -
<Offscreen />组件来控制不在屏幕内的组件，可以将 Idle 优先级赋给某个任务 - Server Component，服务器端组件
浏览器原生支持的时序调度
- Prioritized Task Scheduling API
- 比 requestIdleCallback, setTimeout 更强壮的时序调度
- 基于 Promise 的，直接继承在 event loop 内
- 与 React 核心团队，Google , W3C 达成一致
主要 API
-
scheduler.postTask()，调度，控制并调整任务优先级 -
scheduler.yield(), 将控制权交还给主线程，可以通过重新调度，从中断的地方继续执行。 -
scheduler.wait(), 将控制权交还给主线程，等待一段时间或者等待某个事件以后继续执行。 -
isInputPending()，检查当前任务是否阻塞了用户输入。
总结
-
Rethinking Reactivity, React is not Reactive
- React is NOT Reactive，但它是并发的，这可能就够用了
React 正在推动 Web API 向前，例如 Prioritized Task Scheduling API
React Concurrent 不一定会带来更好的性能。
使用啥技术最终还是看是否能产生业务价值。
