大文本编辑器性能
RenderPlainTextEditor 面向几十万行文本场景。性能目标是点击、输入、拖选、滚动都只处理可视行和必要缓存。
文档模型
大文本不能用一个 textarea 承载全部内容。编辑器内部使用行数组模型,输入和粘贴直接更新模型。
关键规则:
- 粘贴时从 clipboard event 获取文本并阻止默认行为。
- composition end 后清空输入承接元素。
- 不把几十 MB 文本写入隐藏 textarea。
- 替换大范围文本时避免递归或栈递归。
绘制
绘制阶段只处理:
- 可视行。
- overscan 行。
- 当前选区与可视行交集。
- 当前搜索命中与可视行交集。
行号、折叠图标、缩进引导线都应基于可视行绘制。
光标和输入
点击定位光标不应等待下一帧中大量任务。需要检查:
- pointerDown 是否做了全量行扫描。
- composer sync 是否写入巨大 value。
- rAF 队列是否被长任务阻塞。
- 当前页面是否还有其他组件在持续请求 layout。
JSON 折叠
JSON 折叠应基于行级结构,不应每次绘制重新解析全文。大文档打开时可以分批解析或延迟构建折叠模型。
搜索
搜索可以全量扫描文档,但要与绘制解耦:
- 搜索结果保存在模型层。
- 当前匹配项有更明显的颜色。
- next/previous 只在目标不在视窗内时滚动。
- 连续 Enter 可以触发下一处搜索。