Shiki项目中的HTML输出优化：合并相同样式的文本节点

在代码语法高亮工具Shiki中，开发者们发现了一个可以优化HTML输出的机会。当前版本的Shiki在渲染代码时，会将相同样式的连续文本分割成多个span元素，这导致了不必要的DOM节点增加。

以YAML代码的渲染为例，Shiki会生成类似这样的HTML结构：

<span class="line">
  <span style="color:#D32F2F;">  image</span>
  <span style="color:#D32F2F;">:</span>
  <span style="color:#22863A;"> node:20-alpine</span>
</span>

在这个例子中，" image"和":"两个文本片段实际上具有相同的颜色样式，却被分割成了两个独立的span元素。从性能和语义角度来看，这种分割是不必要的。

优化方案

技术团队提出了一个改进方案：将具有相同样式的连续文本片段合并为单个span元素。优化后的输出将变为：

<span class="line">
  <span style="color:#D32F2F;">  image:</span>
  <span style="color:#22863A;"> node:20-alpine</span>
</span>

这种优化带来的好处是多方面的：

1. 减少生成的HTML体积
2. 降低DOM节点的数量，提升页面性能
3. 使生成的HTML结构更加简洁合理

技术考量

值得注意的是，这种优化需要在适当的层级进行。在token级别，不同的文本片段可能包含不同的scope信息，这些信息在某些高级使用场景下可能是有用的。因此，这个优化应该作为一个可配置的选项提供，类似于现有的mergeWhitespaces功能。

实际影响

这种优化的效果会根据使用的主题而变化。主题中使用的颜色种类越少，这种优化带来的合并效果就越明显。对于使用简单主题的项目，这种优化可以显著减少生成的HTML体积和DOM节点数量。

Shiki团队已经将这个功能标记为"PR welcome"，欢迎社区贡献者来实现这个优化。这个改进将进一步提升Shiki作为代码高亮工具的性能表现，特别是在Web应用场景下。