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

摘要

一个为 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/...

相关推荐
Onlyᝰ20 小时前
前端tree树
javascript·vue.js·elementui
高德开放平台21 小时前
实战案例|借助高德开放平台实现智慧位置服务:路线导航的开发与实践
前端·后端
老前端的功夫21 小时前
# HTTP缓存:从懵懵懂懂到了如指掌
前端
安卓开发者21 小时前
Docker与Nginx:现代Web部署的完美二重奏
前端·nginx·docker
Dorian_Ov021 小时前
GeoPandas+DataFrame实现shapefile文件导入PostGIS数据库
前端·gis
葡萄城技术团队21 小时前
Vue 生态下前端 Excel 导入导出终极方案:SpreadJS 实战指南
vue.js
哟哟耶耶21 小时前
Starting again company 03
前端·javascript·vue.js
葡萄城技术团队21 小时前
SpreadJS 赋能在线 Excel:协同编辑与精细化权限管控的技术实现
前端
转转技术团队21 小时前
转转商品中心微前端升级之路
前端
love530love21 小时前
【笔记】解决 ComfyUI 安装节点 ComfyUI-Addoor (葵花宝典)后启动报错:No module named ‘ComfyUI-Addoor’
linux·运维·前端·人工智能·windows·笔记·python