渐进式 Mermaid 和流式 Diff 代码块——渲染速度提升 100 倍
1 分•作者: simon_he•8 个月前
我发布了 vue-markdown-render，这是一个专注于 Vue 的 Markdown 渲染库，针对大型文档和实时预览进行了优化。其核心功能包括渐进式/增量 Mermaid 渲染、流式 diff 代码块（在 diff 到达时渲染）以及各种渲染器级别的优化，这些优化大大减少了重负载下的首次渲染时间和内存使用。<p>为什么需要它：许多 Markdown 渲染器在处理大型文档、大型嵌入式图表和实时编辑场景时都面临挑战。典型的方法是在处理完所有资源/图表/代码之前阻止渲染。在交互式编辑器中，这会导致卡顿和缓慢的反馈循环。vue-markdown-render 针对这些痛点，采用了流式优先的设计。<p>主要功能：<p>渐进式 Mermaid：复杂的图表会逐步渲染，因此用户可以更早地看到可用的图表。
流式 diff 代码块：diff/代码块渲染可以在接收过程中流式传输部分结果，以实现即时反馈。
性能优先的架构：延迟解析、分块渲染和谨慎的内存使用。在一些大型文档基准测试中，我们观察到与 Streamdown 相比，速度提高了约 100 倍（取决于测试用例和环境）。
快速开始 npm i vue-markdown-render // 在 Vue 3 应用程序中 import { createApp } from 'vue' import App from './App.vue' import VueMarkdownRender from 'vue-markdown-render' const app = createApp(App) app.use(VueMarkdownRender) app.mount('#app')<p>复现基准测试（大致） 我们在 /playground 下提供了一个小的基准测试仓库（或在您的发布中附上链接）。要复现类似的测试：<p>准备一个大型 Markdown 文件，其中包含许多代码块和几个大型 Mermaid 图表（例如，总共 5 万多行）。
使用 Node 或浏览器自动化脚本对 vue-markdown-render 和 Streamdown 进行计时渲染（相同的输入）。
测量首次绘制时间和完整渲染时间，并分析内存使用情况。 注意事项和警告：
“100×”这个数字取决于工作负载：它代表在一些重型、类似真实世界的测试中观察到的加速，而不是普遍保证。
环境差异（CPU、浏览器、Node 版本）和具体的文档形状会影响结果。
我们欢迎在测试工具上的复现和 PR。
讨论点/向社区提问<p>您尝试了哪些大型文档工作流程，但仍然感觉很慢？
您是否更喜欢开箱即用的编辑器集成（Monaco/CodeMirror 演示）？
关于其他流式友好的 Markdown 扩展的想法？
链接<p>仓库：https://github.com/Simon-He95/vue-markdown-render
游乐场/基准测试：（链接到游乐场文件夹或单独的基准测试仓库）
快速演示：（如果可用，链接到演示站点）
感谢 — 很高兴回答问题，并欢迎对基准测试方法或集成示例的反馈。
查看原文
I'm releasing vue-markdown-render, a Vue-focused Markdown rendering library optimized for large documents and real-time previews. The core features are progressive/incremental Mermaid rendering, streaming diff code blocks (render as the diff arrives), and various renderer-level optimizations that drastically reduce time-to-first-render and memory use in heavy workloads.<p>Why this exists: Many Markdown renderers struggle with huge documents, large embedded diagrams, and live-editing scenarios. Typical approaches block rendering until all assets/graphs/code are processed. In interactive editors this causes jank and slow feedback loops. vue-markdown-render targets those pain points with a streaming-first design.<p>Key features:<p>Progressive Mermaid: complex diagrams render incrementally so users see a usable diagram earlier.
Streaming diff code blocks: diff/code-block rendering can stream partial results during reception for instant feedback.
Performance-first architecture: lazy parsing, chunked rendering, and careful memory usage. In some large-doc benchmarks we observe ~100× speedups vs Streamdown (depends on test case and environment).
Quick start npm i vue-markdown-render // in a Vue 3 app import { createApp } from 'vue' import App from './App.vue' import VueMarkdownRender from 'vue-markdown-render' const app = createApp(App) app.use(VueMarkdownRender) app.mount('#app')<p>Reproducing the benchmark (approx) We provide a small benchmark repo under /playground (or attach a link in your release). To reproduce a similar test:<p>Prepare a large markdown file containing many code blocks and a few large Mermaid diagrams (e.g., 50k+ lines total).
Run a timed render with Node or a browser automation script for both vue-markdown-render and Streamdown (same input).
Measure time-to-first-paint and full render time, and profile memory usage. Notes and caveats:
The "100×" number is workload dependent: it represents observed accelerations in some heavy, real-world-like tests, not a universal guarantee.
Differences in environment (CPU, browser, Node version) and the specific document shape affect results.
We welcome replication and PRs on test harnesses.
Discussion points / Ask the community<p>What large-doc workflows have you tried that still feel slow?
Would you prefer an out-of-the-box editor integration (Monaco/CodeMirror demo) for this?
Ideas for additional streaming-friendly Markdown extensions?
Links<p>Repo: https://github.com/Simon-He95/vue-markdown-render
Playgrounds / benchmarks: (link to playground folder or separate bench repo)
Quick demo: (link to demo site if available)
Thanks — happy to answer questions, and would love feedback on benchmark methodology or integration examples.