Lexical 编辑器历史记录插件的性能优化实践

历史记录对编辑器性能的影响

在富文本编辑器开发中，历史记录功能是提升用户体验的重要特性，它允许用户撤销和重做编辑操作。然而，Facebook开源的Lexical编辑器在处理大型文档时，历史记录插件可能导致内存使用量显著增加。

通过性能分析发现，当启用历史记录插件时，JavaScript堆内存使用量会随着编辑操作的增加而持续增长。相比之下，禁用历史记录插件时，内存使用保持相对稳定。

历史记录限制的实现方案

针对这一问题，Lexical提供了灵活的解决方案。由于历史记录的数据结构是公开的，开发者可以直接操作这些结构来实现历史记录的限制功能。

核心思路是通过监听编辑器更新事件，定期修剪历史记录栈的大小。具体实现中，我们需要关注两个关键数据结构：

• redoStack：存储可重做的操作
• undoStack：存储可撤销的操作

以下是一个优化的历史记录插件实现示例，它允许设置最大历史记录条数：

function pruneHistoryListener({redoStack, undoStack}: HistoryState, maxHistory: number): UpdateListener {
  return () => {
    redoStack.length = Math.max(0, Math.min(maxHistory, redoStack.length));
    undoStack.length = Math.max(0, Math.min(maxHistory - redoStack.length, undoStack.length));
  };
}

function LimitedHistoryPlugin(props: {
  delay?: number = 1000;
  maxHistory?: number = 50;
  externalHistoryState?: HistoryState;
}) {
  const historyState = useMemo(() => externalHistoryState || createEmptyHistoryState(), [externalHistoryState]);
  const [editor] = useLexicalComposerContext();
  useEffect(() => {
    return mergeRegister(
      registerHistory(editor, historyState, delay),
      editor.registerUpdateListener(pruneHistoryListener(historyState, Math.max(0, maxHistory))),
    );
  }, [editor, historyState, delay, maxHistory]);
  return null;
}

优化效果验证

实际测试表明，这种限制历史记录大小的方案效果显著：

• 当设置maxHistory为100时，内存使用保持在一个较低且稳定的水平
• 当设置maxHistory为500时，内存使用量有所增加，但仍远低于不限制历史记录大小的情况

进阶优化思路

对于追求更高性能的场景，可以考虑以下更精细的优化策略：

1. 基于节点数的限制：不是简单地限制历史记录条目数，而是计算每个历史记录条目中节点映射表(nodeMap)的大小，根据总节点数来限制历史记录。

2. 高效数据结构：替代直接引用完整编辑器状态的做法，设计更紧凑的数据结构来存储历史记录变化。

3. 差异存储：只存储状态之间的差异，而不是完整的编辑器状态。

这些高级优化虽然能带来更好的性能，但实现复杂度也会显著增加，需要权衡开发成本和性能收益。

实践建议

对于大多数应用场景，简单的历史记录条数限制已经能够有效控制内存使用。建议：

1. 根据文档大小和编辑频率选择合适的maxHistory值
2. 对于内容管理系统等长期运行的编辑器实例，务必启用历史记录限制
3. 定期测试不同设置下的内存使用情况，找到最佳平衡点

通过合理配置历史记录插件，开发者可以在保持良好用户体验的同时，确保编辑器在各种使用场景下都能保持流畅的性能表现。