vue-markdown-renderer：比 vercel streamdown 更低 CPU、更多节点支持、真正的流式渲染体验

Simon_He2025-09-11 13:20

摘要

一个为 Vue 3 打造的高性能 Markdown 渲染器，支持流式渐进渲染、丰富节点类型和可定制组件映射，实际使用中对 CPU 占比、感知渲染速度和样式能力都有显著改进。

核心亮点

更低的 CPU 消耗：针对解析与渲染环节做了多处优化，减少不必要的重排/重绘。
真正的流式渲染：大文档能边解析边渲染，用户体验更流畅，首屏内容更快可交互。
更丰富的 Markdown 节点支持：admonition、定义列表、脚注、数学块、emoji、checkbox 等。
特殊语种自动从右到左（RTL）书写
组件化渲染：通过 customComponents 轻松替换任意节点的渲染组件。
可选打字机（typewriter）效果：优化光标定位逻辑，避免频繁重排，使用 requestAnimationFrame + IntersectionObserver 降低开销。

快速上手

vue 复制代码

<script setup>
import NodeRenderer from 'vue-markdown-renderer/src/components/NodeRenderer/NodeRenderer.vue'
const markdown = `# Hello\n\n- item\n\n\`\`\`js\nconsole.log('hi')\n\`\`\``
</script>

<template>
  <NodeRenderer :content="markdown" :typewriterEffect="true" />
</template>

下面有 playground 可以对比 vue-markdown-renderer 和 vercel-streamdown

vue-markdown-renderer vercel-streamdown

同样内容输出，streamdown cpu 占用率高达 99%

而 vue-markdown-renderer 稳定在 30%-40%

🌟 源码：github.com/Simon-He95/...