Markstream-VUE：构建高性能流式 Markdown 渲染器

┌─────────────────────────────────────┐
│           应用层 (App)               │
│  • 接收 SSE/WebSocket 流            │
│  • 管理 content 响应式状态           │
└─────────────┬───────────────────────┘
              │ ref<string> / ParsedNode[]
              ▼
┌─────────────────────────────────────┐
│        渲染器层 (MarkdownRender)     │
│  • 流式解析调度                      │
│  • 虚拟窗口管理                      │
│  • 批次渲染控制                      │
│  • 自定义组件注册                    │
└─────────────┬───────────────────────┘
              │ ParsedNode[]
              ▼
┌─────────────────────────────────────┐
│        节点组件层 (Node Components)  │
│  • CodeBlockNode: Monaco/Shiki      │
│  • MermaidNode: 渐进式图表           │
│  • MathNode: KaTeX 公式             │
│  • CustomNode: 用户自定义组件        │
└─────────────┬───────────────────────┘
              │ VNode
              ▼
┌─────────────────────────────────────┐
│         Vue 3 渲染引擎               │
│  • 响应式更新                        │
│  • 虚拟 DOM diff                    │
│  • 调度器优先级控制                  │
└─────────────────────────────────────┘

// 简化版流式解析核心逻辑
interface StreamParser {
  // 接收新内容，返回已稳定的节点 + 待完成的上下文
  push(chunk: string, options?: { final?: boolean }): {
    stableNodes: ParsedNode[]    // 可立即渲染的节点
    pendingContext: ParseContext // 未闭合的语法状态（如代码块、公式）
  }
  
  // 标记流结束，强制结算所有待完成节点
  finalize(): ParsedNode[]
}

// 使用示例
const parser = createStreamParser()
const { stableNodes, pendingContext } = parser.push('# Hello\n\n```ts\ncon')
// stableNodes: [heading, paragraph]
// pendingContext: { type: 'code-fence', lang: 'ts', content: 'con' }

// 后续内容到达
const next = parser.push('st.log("world")\n```')
// 自动合并 pendingContext，输出完整的 code-block 节点

<MarkdownRender
  :content="longDoc"
  :max-live-nodes="320"        <!-- 同时保留的完整节点数 -->
  :live-node-buffer="60"       <!-- 窗口上下缓冲节点数 -->
  :defer-nodes-until-visible="true"  <!-- 重节点延迟挂载 -->
/>

滚动位置: [████████████████] 视口
           ↑                ↑
      窗口起始          窗口结束
      
已渲染节点: [---缓冲---][████视口████][---缓冲---][~~~卸载~~~]
           ↑          ↑          ↑          ↑
      缓冲起始   视口起始   视口结束   缓冲结束

• 窗口内节点：完整渲染，可交互
• 缓冲区内节点：轻量占位，快速展开
• 窗口外节点：卸载回收，保留位置信息

// Monaco 流式更新核心流程
class StreamCodeBlock {
  async updateStream(newContent: string) {
    // 1. 计算文本 diff（最小变更集）
    const changes = computeMinimalChanges(this.prevContent, newContent)
    
    // 2. 在 Worker 中执行 Monaco 模型更新（避免阻塞主线程）
    const worker = await getMonacoWorker()
    await worker.applyChanges({
      modelId: this.modelId,
      changes,  // [{range, text, forceMoveMarkers}]
      theme: this.theme
    })
    
    // 3. 主线程仅更新必要的 DOM 属性（如滚动位置）
    this.syncScrollPosition()
  }
}

阶段 1：语法校验 + 占位展示（<10ms）
  • 检查 Mermaid 语法基本结构
  • 显示"图表加载中"占位框 + 骨架屏
  • 用户感知：内容连续，无空白断点

阶段 2：异步解析 + 渐进渲染（50-200ms）
  • Worker 中执行 mermaid.render()
  • 解析完成立即更新 SVG，保留占位尺寸避免重排
  • 用户感知：图表"渐显"，无布局跳动

阶段 3：交互增强 + 错误恢复（可选）
  • 添加缩放、拖拽等交互能力
  • 解析失败时显示友好错误 + 源码 fallback

<MarkdownRender
  :content="doc"
  :enable-mermaid="true"
  :mermaid-options="{
    startOnLoad: false,  // 禁用自动渲染，由组件控制时机
    securityLevel: 'strict'
  }"
/>

<MarkdownRender
  :content="stream"
  :final="isStreamDone"
  :max-live-nodes="0"           <!-- 禁用虚拟化，启用增量批次 -->
  :batch-rendering="true"
  :render-batch-size="16"       <!-- 每帧渲染 16 个节点 -->
  :render-batch-delay="8"       <!-- 批次间隔 8ms -->
  :fade="true"                  <!-- 新内容淡入，减少视觉跳跃 -->
  :typewriter="true"            <!-- 显示打字光标 -->
  :defer-nodes-until-visible="true"  <!-- 重节点延迟加载 -->
/>

<MarkdownRender
  :nodes="preParsedNodes"       <!-- 服务端预解析，避免客户端重复计算 -->
  :max-live-nodes="220"         <!-- 虚拟化窗口大小 -->
  :live-node-buffer="40"        <!-- 缓冲区域 -->
  :viewport-priority="true"     <!-- 视口内节点优先渲染 -->
  :batch-rendering="true"
  :render-batch-budget-ms="8"   <!-- 每帧渲染预算 8ms -->
/>

<MarkdownRender
  :content="diffMarkdown"
  :code-block-props="{
    stream: true,               <!-- 启用 Monaco 流式更新 -->
    theme: { light: 'vitesse-light', dark: 'vitesse-dark' },
    diffMode: 'inline'          <!-- 行内 diff 展示 -->
  }"
  :enable-mermaid="false"       <!-- 禁用重组件，聚焦代码 -->
/>

interface RenderMetrics {
  // 渲染性能
  lcp: number           // Largest Contentful Paint (ms)
  cls: number           // Cumulative Layout Shift
  frameTimeP95: number  // 95 分位帧耗时 (ms)
  
  // 内存指标
  domNodeCount: number  // 当前 DOM 节点数
  heapSize: number      // JS 堆内存 (MB)
  
  // 流式体验
  streamJitter: number  // 内容更新间隔标准差 (ms)
  placeholderRatio: number  // 占位节点占比
}

# vercel.json
{
  "buildCommand": "pnpm build",
  "outputDirectory": "dist",
  "framework": "vite",
  "env": {
    "NODE_VERSION": "20"
  }
}

// 配置 CDN 回源规则
{
  "origin": "your-oss-bucket.oss-cn-hangzhou.aliyuncs.com",
  "cacheRules": [
    {
      "pattern": "/assets/monaco-editor-workers/*",
      "ttl": 31536000,  // 1 年缓存
      "compress": true
    },
    {
      "pattern": "/assets/*.css",
      "ttl": 86400,     // 1 天缓存
      "compress": true
    }
  ]
}

// cloudfunction/stream-render/index.ts
import { parseMarkdownToStructure } from 'markstream-vue'

export const main = async (event: any) => {
  const { markdown, options } = JSON.parse(event.body)
  
  // 服务端预解析，减少客户端计算
  const nodes = parseMarkdownToStructure(markdown, undefined, {
    ...options,
    final: true  // 完整内容，禁用流式解析
  })
  
  return {
    statusCode: 200,
    body: JSON.stringify({ nodes }),
    headers: { 'Content-Type': 'application/json' }
  }
}