[RFC] 流式 Markdown Benchmark

[Div627]

Summary

本方案提出一个基于 Playwright Component Testing 的标准化流式 Markdown 渲染性能基准测试，通过统一接口、标准数据集和自动化指标采集，填补前端生态在增量渲染场景下缺乏可量化、可复现性能评估工具的空白，支持 CI 集成与技术选型。

Motivation

随着 AI 应用/现代 Web 应用对实时性和用户体验的要求不断提高，流式渲染（streaming rendering） 技术逐渐成为主流，尤其是在渲染 Markdown 这类轻量级标记语言时。
然而，目前业界缺乏统一标准来衡量不同实现方案在流式渲染场景下的性能表现。这导致：

• 开发者难以客观比较不同库或框架的渲染效率；
• 用户无法判断哪种方案在低延迟、高吞吐量、流畅性等方面表现更优；
• 性能优化缺乏可量化的目标和基准测试依据。

核心能力
建立一套标准化、可重复的测试方法，用于衡量和比较不同 Markdown 流式渲染实现的关键性能指标，如：

• 完全渲染时间（TTFR）
• 内存使用（Memory Usage）
• 帧率（FPS）
• DOM 节点数量（DOM count）

本 Benchmark 可集成至 CI/CD 流程，用于性能回归检测、技术选型评估及优化方向验证。

Detailed Design

流式渲染定义

“流式”在此指：Markdown 内容按时间分块（chunk）逐步到达前端，并在不阻塞 UI 的前提下增量渲染。典型场景包括：

• LLM 输出逐 token 渲染；
• 网络分片加载长文档；
• 用户输入实时预览。

Benchmark 指标

• 总渲染时间（Total Render Time）：完整内容渲染完毕所需时间。
• 内存增长（Memory Growth）：随 chunk 增加的内存占用变化。
• FPS / 主线程阻塞时间：是否导致页面卡顿。
• DOM 节点数量稳定性：避免重复创建/销毁节点（如未使用虚拟滚动或 diff 优化）。

测试输入设计

标准测试集：预定义多个 Markdown 样本，覆盖：

• 纯文本流；
• 含代码块、表格、嵌套列表；
• 大段连续文本 vs 高频小 chunk；
• 特殊语法（LaTeX、任务列表等）。

Chunking 策略

固定字节数（如每 50 字符）；
按 token（模拟 LLM）；
按语义边界（如句子结束）。

测试执行环境

• 使用 @playwright/experimental-ct-react 进行组件级测试；
• 在 Chromium、Firefox、WebKit 下运行（可选）；
• 控制 CPU throttling（如 4x slowdown）以放大差异；
• 禁用缓存、动画等干扰因素

组件工程设计

packages/x-markdown/benchmark/
├── src/
│   ├── components/
│   │   └── StreamedMarkdownRenderer.tsx   // 待测组件接口
├── tests/
│   └── streamed-markdown.bench.ct.tsx     // Playwright Component Test
└── libs/
    ├── marked-stream.ts                   // 示例实现 A
    └── react-markdown-stream.ts           // 示例实现 B

Example Usage

基础使用

// tests/streamed-markdown.bench.ct.tsx
import { test, expect } from '@playwright/experimental-ct-react';
import { StreamedMarkdownRenderer } from '../src/components/StreamedMarkdownRenderer';
import { SAMPLES } from '../src/fixtures/markdownSamples';
import { collectMetrics } from '../src/metrics/performanceCollector';

test('should render large document with low latency', async ({ mount }) => {
  const sample = SAMPLES.largeDocWithCode;
  const chunks = splitIntoChunks(sample, { strategy: 'token', size: 20 });

  const metrics = await collectMetrics(async () => {
    const component = await mount(<StreamedMarkdownRenderer chunks={[]} />);
    
    for (let i = 1; i <= chunks.length; i++) {
      await component.update(<StreamedMarkdownRenderer chunks={chunks.slice(0, i)} />);
      // 可插入 microtask delay 模拟网络间隔
    }
  });

  expect(metrics.totalRenderTime).toBeLessThan(2000); // ms
  expect(metrics.maxInterChunkLatency).toBeLessThan(100);
});

性能指标采集

export async function collectMetrics(fn: () => Promise<void>) {
  await page.evaluate(() => performance.clearMarks());
  const start = performance.now();

  await fn();

  const measures = await page.evaluate(() => {
    return performance.getEntriesByType('measure');
  });

  const memory = await page.metrics().then(m => m['JSHeapUsedSize']);

  return {
    totalRenderTime: performance.now() - start,
    maxInterChunkLatency: Math.max(...measures.map(m => m.duration)),
    memoryUsage: memory,
  };
}

[afc163]

👍🏻 专业！

[Div627]

交互形式可能是像 react-scan 的浮层

[imcuttle]

这个目前有加入到ci中吗，有参考可用的benchmark度量逻辑么

[Div627]

预计下个 feature 版本会集成。