最近看到 markdown-stream-vue 比较火热,但想要实际使用的时候发现并不符合个人使用场景,并且其仅在 vue 渲染层做了优化,实际每次来新的 chunk 后还是会拼接之前收到的所有 markdown 字符串重新使用 markdown-it 做解析,但我想要的是从解析的层面就支持流式解析,因此有了当前项目 incremark。
它从收到 chunk 的时候就开始进行解析,之前已解析完成的块则不会重复解析,渲染层也支持了 vue/react 主流框架,后续会支持 svelte 与 solid 。
理论上来讲,当前的优化将 O(n²) 的解析优化到了 O(n),因此文档越大,收益越高,下面为实际 benchmark 测试,测试大文档流式解析收益达到了 46 倍,短小的 markdown 也有 2-20 倍的收益。
感兴趣可以查看官网 https://incremark-docs.vercel.app/zh/
Benchmark 测试结果(节选总结部分):
================================================================================
📈 Complete Benchmark Summary
================================================================================
| Document Size | Chunk | Time Saved | Chars Saved | Speedup |
|------------------|-------|------------|-------------|---------|
| Short (~1KB) | 10 | 60.7% | 98.0% | 2.54x |
| Short (~1KB) | 50 | 52.6% | 90.5% | 2.11x |
| Medium (~5KB) | 10 | 91.1% | 99.6% | 11.28x |
| Medium (~5KB) | 50 | 89.5% | 98.0% | 9.48x |
| Long (~10KB) | 10 | 95.6% | 99.8% | 22.78x |
| Long (~10KB) | 50 | 94.2% | 99.0% | 17.11x |
| Very Long (~20KB) | 10 | 97.8% | 99.9% | 45.99x |
| Very Long (~20KB) | 50 | 97.3% | 99.5% | 37.36x |
--------------------------------------------------------------------------------
📊 Average by Document Size:
Short (~1KB): 2.33x faster, 56.7% time saved
Medium (~5KB): 10.38x faster, 90.3% time saved
Long (~10KB): 19.94x faster, 94.9% time saved
Very Long (~20KB): 41.67x faster, 97.5% time saved
--------------------------------------------------------------------------------
🎯 Overall Average:
Time Saved: 84.8%
Chars Saved: 98.0%
Speedup: 18.58x
================================================================================
故事的开始 最初是想要实现富文本编辑器 ai 流式输出的,此过程大致为 ai -> chunk -> parser -> propsemirror JSONContent, pending 状态更新的块替换,complete 块忽略更新,实现富文本编辑器中类似 ai 聊天框一样的流式输出,并且要尽量节省性能。 然后就出现了 incremark,在此过程中也关注到了 vue-stream-markdown,不过它做的只是 vue 渲染层的优化,每次 ai 输出的 markdown chunk,它还是会将其跟之前所有输出拼接解析成 token,虽然在渲染层做到了流式的渲染,但其内核无法满足我的需求,所以就自己写了一个小工具。
目前该项目已创建 deepwiki 索引,相关提问:
Q1:当前项目实现的 markdown 解析性能如何
Q2:你从他的代码实现上看,为什么能做到如此成绩?
点击链接查看回答:
https://deepwiki.com/search/-markdown_d5f1c37d-ac1f-41c5-8e1a-733a60b0df67?mode=fast
1
Ocyss 7 小时 0 分钟前
看着挺不错的,点个 star 了,说不定日后能用上
|
2
twofox 6 小时 57 分钟前
可以,看着确实不错。start 一下
|
3
1244943563 OP @Ocyss 感谢
|
4
1244943563 OP @twofox 哈哈哈 感谢支持
|
5
gigode 31 分钟前
感谢分享,我经常用的是这个 https://onlinenotepad101.org/markdown-editor
|