rrweb项目中CSS文本分割导致的性能问题分析与优化

问题背景

rrweb作为一款优秀的网页录制工具，在最新版本(v2.0.0-alpha.18)中出现了一个严重的性能问题。当页面中包含大量CSS内容时，特别是通过浏览器扩展(如Grammarly、Sider AI等)动态注入的CSS样式，会导致录制过程中的JavaScript堆内存耗尽，造成页面卡顿甚至冻结。

问题现象

开发团队发现，当用户使用某些浏览器扩展时，rrweb的录制功能会导致明显的性能下降。通过性能分析工具可以看到，splitCssText函数在执行时会占用大量CPU资源，有时甚至会导致浏览器冻结长达10秒。

技术分析

问题根源

问题的核心在于splitCssText函数的实现逻辑。该函数原本设计用于正确处理CSS文本中的特殊字符和转义序列，确保录制后的CSS能够准确还原。但在处理以下情况时会出现性能问题：

1. 浏览器扩展注入的大规模CSS内容(如Grammarly注入的104KB CSS)
2. 包含多个子文本节点的style元素(当CSS超过60-70KB时，浏览器会自动分割)
3. 包含大量特殊字符或转义序列的CSS规则

性能瓶颈

通过基准测试发现，当style元素包含多个子文本节点时，splitCssText函数会触发嵌套循环，导致时间复杂度急剧上升。特别是在处理以下结构时：

<style>
  <!-- 第一个文本节点，约65KB -->
  <!-- 第二个文本节点，约38KB -->
</style>

函数需要对每个文本节点进行完整处理，并且处理逻辑中存在多重循环，这在面对大规模CSS时就会成为性能瓶颈。

解决方案

开发团队提出了两个阶段的优化方案：

第一阶段优化

1. 引入迭代限制(iter_limit)机制，当循环次数超过阈值时提前退出，避免无限循环
2. 优化CSS文本合并逻辑，减少不必要的字符串操作
3. 简化特殊字符处理流程

第二阶段优化

在进一步测试后发现第一阶段优化仍不能完全解决问题，于是进行了更深层次的改进：

1. 重构CSS文本分割算法，降低时间复杂度
2. 增加对超大CSS内容的特殊处理
3. 优化内存使用，避免频繁的字符串操作

技术实现细节

优化后的实现主要关注以下几点：

1. 性能与正确性的平衡：在保证CSS录制准确性的前提下，优先确保性能
2. 边界条件处理：特别关注浏览器自动分割CSS文本节点的情况
3. 资源消耗控制：严格控制内存和CPU使用，避免影响主线程

实际应用建议

对于使用rrweb的开发者，如果遇到类似性能问题，可以考虑：

1. 检查页面中是否有大规模CSS内容，特别是动态注入的
2. 在非关键场景下，可以暂时禁用CSS录制功能
3. 关注rrweb的更新，及时获取性能优化版本

总结

rrweb作为网页录制工具，在处理CSS内容时需要兼顾准确性和性能。通过这次优化，团队不仅解决了特定场景下的性能问题，也为后续处理类似情况积累了经验。这也提醒我们，在开发涉及大规模文本处理的工具时，需要特别注意算法复杂度和实际性能表现。