samuelclassic
V2EX  ›  Vue.js

请教大家流式传输下,前端渲染 Markdown 图片的问题

  •  1
     
  •   samuelclassic · Aug 10, 2024 · 2695 views
    This topic created in 672 days ago, the information mentioned may be changed or developed.
    lastMessage.message += chunks // 获取数据
    
    <div class="markdown-body" v-html="renderedContent"></div>
    
    get renderedContent() {
        return marked(this.messageContent)
    }
    

    如果 renderedContent 含有图片,由于重新渲染,引发“闪烁”现象。尝试以 chunk 中的换行符分割为字符串数组,然后使用 v-for 渲染。但这样会有多余的 div 标签,观察 ChatGPT 的 DOM 树并非如此。请问大家有什么解决思路吗?感激不尽!

    4 replies    2024-08-11 08:58:24 +08:00
    nagisaushio
        1
    nagisaushio  
       Aug 10, 2024 via Android
    缓存收到的数据,等到达了一个元素的边界再更新上去
    xiangyuecn
        2
    xiangyuecn  
       Aug 10, 2024
    原生的高效还简单
    div1=document.querySelector(".markdown-body")
    div2=doucment.createElement("div") div2.innerHTML=renderedContent
    递归对比两个 div 内部元素差异,把新增的直接 appendChild 到页面对应的位置
    samuelclassic
        3
    samuelclassic  
    OP
       Aug 10, 2024 via iPhone
    luckrnx09
        4
    luckrnx09  
       Aug 11, 2024 via iPhone
    1 楼正解
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   2824 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 39ms · UTC 12:08 · PVG 20:08 · LAX 05:08 · JFK 08:08
    ♥ Do have faith in what you're doing.