
towxml-stream-typewriter 实现流式 Markdown 打字机 虚拟显示彻底解决长文本卡顿与发热让大模型的 Markdown 回复像 ChatGPT 一样逐字打出来还不卡、不热、不掉帧GitHub 开源地址欢迎 Star Forkhttps://github.com/zhouzxx/towxml-stream-typewriter (已得到towxml官方致谢推荐)演示效果先看视频再决定是否 Star下面是项目实际运行的演示视频流式 Markdown 打字机打字机演示视频备用直链如果视频无法播放直接点击 这里下载或在线观看MP4 格式支持手机/电脑播放。或者观看 B 站详细源码讲解视频包含 towxml 原理解析 魔改思路 流式打字机实现 towxml 源码及流式打字机魔改讲解视频真实性能实测普通人也能看懂的效果测试环境安卓手机打字速度设置为5 毫秒一个字① 5 万字 Markdown 长文本传统 towxml越渲染越慢后期直接卡死、闪退本组件全程流畅打字总耗时仅 4 分 30 秒对比理论最快速度4 分 10 秒只慢了 20 秒几乎接近极限速度② 20 万字超长连续对话10 轮 × 2 万字很多组件有一个通病一开始很快越聊越慢越往后越卡。而本组件做到了第一轮 2 万字打完用了多久第十轮 2 万字打完速度几乎一模一样第一遍和最后一遍的耗时差距不到 2 秒简单说不管聊多久、文本多长速度从头稳到尾不会越用越卡。一分钟速览如果你正在用小程序 / uni-app 开发 AI 聊天机器人却被 towxml 的流式 Markdown 渲染卡顿困扰这个项目就是为你量身打造的核心卖点增量复用 文字局部追加 批次虚拟显示效果无论回复多长几万字、几十万字打字速度稳定、滚动丝滑、iOS Android 双平台不卡顿适用场景AI 对话、多轮聊天、技术文档流式展示、长文实时渲染接入难度完整示例 demo开箱即用支持框架原生小程序、uni-app (Vue 3)、Taro最快上手直接 clone Demo 项目运行看效果10 分钟就能接入你的项目直接 Star 支持作者继续优化→ https://github.com/zhouzxx/towxml-stream-typewriter痛点为什么传统 towxml 流式渲染在 iOS 和 Android 上都卡大模型如 ChatGPT、Claude、文心一言、通义千问等通常采用SSE 流式输出 Markdown前端每收到一小段就要更新 UI。常见做法把累计 Markdown 喂给 towxml → 组件全量解析 全量渲染。结果就是文本越长解析/渲染开销指数级上升打字机效果越来越慢从 10ms/字 → 几百 ms/字iOS 和 Android 都容易发热、掉帧、内存压力大图片、代码块、表格等复杂节点重复创建驻留严重长列表滚动时setData 频繁触发页面卡死或崩溃文本一多甚至直接闪退根本没法上线使用开发者普遍反馈“towxml 静态 Markdown 完美流式输出在双平台都劝退”。towxml-stream-typewriter 如何彻底解决作者通过深度魔改 towxml 源码经过多轮性能迭代从“卡死闪退”一路优化到“接近理论极限速度”最终实现三大核心优化1. 增量复用 局部渲染只解析尾部新增的文本已经渲染好的内容直接复用不再重复解析整棵节点树。纯文本走字符级追加结构语法列表、代码块、表格才局部更新从根源降低开销。2. 稳定可控的打字机效果支持开启/关闭打字机可自定义速度默认 5ms/字符。内部做了单帧渲染上限、时间片控制保证 UI 永远不会被阻塞。3. 批次化虚拟显示超长文本不爆内存只渲染屏幕附近几屏内容超出范围的节点自动卸载视图、释放内存但保留高度占位。配合滚动节流与中断机制彻底解决长文本内存爆炸问题。优化历程5 万字 MD 安卓渲染最初版本后期卡死、闪退第一轮优化40 分钟第二轮优化18 分钟最终版本4 分 30 秒仅比理论值慢 20 秒再加上 20 万字连续渲染速度几乎无衰减真正做到了长文本、多轮对话也丝滑。最快上手方式直接从 Demo 开始README 文字再详细也不如直接跑示例代码来得直观。示例里面注释超级详细还包含了很多实际场景的最佳实践如何加载历史消息一次性渲染实时滚动到底部 停留页面时自动暂停滚动用户手动终止打印比如切换问题时虚拟显示配合 scroll-view 的完整实现防止内存爆炸流式输入 打字机效果的完整聊天界面逻辑推荐步骤Clone 以下任一 Demo 项目运行项目看打字机效果阅读 demo 的使用逻辑替换你的 SSE/WebSocket 流式接口调用测试长文本场景感受丝滑Demo 项目链接 uni-app 使用示例Vue 3→ 推荐 uni-app 开发者直接 clone 运行 原生小程序使用示例→ 原生小程序用户首选逻辑更纯粹适用场景 谁最需要它AI 聊天机器人小程序 / uni-app大模型流式 Markdown 输出界面技术文档 / 知识库实时渲染长文、多轮对话场景iOS Android 双平台性能敏感项目需要稳定支撑大量长文本对话的产品如果你正在开发类似产品却被 towxml 流式卡顿、发热、闪退劝退强烈推荐试用 towxml-stream-typewriter。开源地址 参与方式GitHub 主仓库欢迎 Star、Fork、PRhttps://github.com/zhouzxx/towxml-stream-typewriter你可以直接 clone Demo 项目接入你的 SSE / WebSocket 接口提交 Issue报 bug、提需求、分享使用场景PR 优化更多平台适配、主题扩展、性能微调分享给朋友圈 / 技术群 / 掘金 / CSDN你的一个 Star就是我继续维护 优化的最大动力如果它帮你在 iOS 和 Android 上实现了流畅的 AI 打字机对话请一定点个 Star 支持作者 祝你的小程序 AI 项目越来越丝滑