V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
1244943563
V2EX  ›  分享创造

周末项目: markdown 流式解析 + 渲染双重优化

  •  
  •   1244943563 · 7 小时 20 分钟前 · 479 次点击

    最近看到 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
    
    ================================================================================
    
    
    第 1 条附言  ·  6 小时 15 分钟前

    故事的开始 最初是想要实现富文本编辑器 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

    5 条回复    2025-12-15 17:08:38 +08:00
    Ocyss
        1
    Ocyss  
       7 小时 0 分钟前
    看着挺不错的,点个 star 了,说不定日后能用上
    twofox
        2
    twofox  
       6 小时 57 分钟前
    可以,看着确实不错。start 一下
    1244943563
        3
    1244943563  
    OP
       6 小时 36 分钟前
    @Ocyss 感谢
    1244943563
        4
    1244943563  
    OP
       6 小时 24 分钟前
    @twofox 哈哈哈 感谢支持
    gigode
        5
    gigode  
       31 分钟前
    感谢分享,我经常用的是这个 https://onlinenotepad101.org/markdown-editor
    关于   ·   帮助文档   ·   自助推广系统   ·   博客   ·   API   ·   FAQ   ·   Solana   ·   4975 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 60ms · UTC 09:39 · PVG 17:39 · LAX 01:39 · JFK 04:39
    ♥ Do have faith in what you're doing.