运行时与交互体验
涵盖 防抖与节流、虚拟列表、长任务、Web Worker，以及与主线程相关的体验优化。
1. 防抖（debounce）与节流（throttle）
| 典型场景 | |
|---|---|
| 防抖 | 搜索框输入、窗口 resize 结束、提交防连点：事件停止触发后只执行一次 |
| 节流 | 滚动监听、鼠标移动跟手：固定时间窗口内最多执行一次 |
实现可用 Lodash 或自写；需注意 this 与取消防抖 等业务细节。
2. 长列表与虚拟列表
问题：上万 DOM 节点导致布局与内存压力巨大。
思路：只挂载视口内及少量缓冲行，滚动时复用行组件（react-window / vue-virtual-scroller 等）。
适合表格、Feed、大量日志等；需处理 行高不固定、动态数据 等边界情况。
3. 长任务（>50ms 量级）与主线程
长任务会推迟输入响应，导致 卡顿、INP 变差。
优化方向：
- 拆分为小块：
setTimeout/queueMicrotask/requestIdleCallback（需注意兼容性）做时间切片。 - 减少多余渲染：避免无效
setState、大面积 DOM 操作。 - 移出主线程：纯计算、大批量数据处理可考虑 Web Worker。
4. Web Worker
适用：加密、编解码、大数据排序、图像处理等 无 DOM 的 CPU 密集逻辑。
限制：不能直接访问 DOM；通过 postMessage 通信，注意 序列化开销，不适合极细碎且来回反复的调用。
小结
交互体验：输入路径短（防抖节流）+ 列表少 DOM（虚拟列表）+ 主线程少阻塞（拆任务 / Worker）。