- 博客(225)
- 资源 (2)
- 收藏
- 关注
RSS订阅
原创 流式 Markdown 渲染完全指南【五】
摘要：生产级架构的分块解析与增量渲染方案 本文探讨了处理大规模AI输出（如5000行代码）时的性能优化方案。核心思路是将内容分为稳定块(StableBlock)和流式块(StreamingBlock)，通过分层架构实现高效解析： 问题分析：全量解析导致O(n²)时间复杂度，20000字符需4.7秒处理 解决方案： 稳定块：语法完整的闭合内容，永久缓存不重复解析 流式块：动态变化内容，延迟处理或降级渲染 三层架构： 数据层：智能缓冲，累积到阈值触发处理 切分层：边界识别（空行/代码块闭合等）分割内容块 解析渲
2026-08-20 09:41:25
45
原创 流式 Markdown 渲染完全指南【四】
摘要： 2026年标准化工具Remend和Streamdown解决了流式Markdown的标签截断问题。Remend作为预处理器，自动检测并补全不完整的语法（如加粗、代码块等），且能无缝更新真实闭合标记。Streamdown是基于Remend的React组件，专为AI流式传输优化，提供开箱即用的Markdown渲染。生态支持扩展到Vue和其他框架。Remend虽覆盖95%场景，但对自定义语法和超长文本存在局限。建议新项目直接采用这些标准化方案，仅特殊场景需自定义实现。
2026-08-13 08:54:29
39
原创 流式 Markdown 渲染完全指南【三】
状态机驱动代码块解析 文章摘要： 本文探讨了状态机在流式Markdown解析中的应用，特别针对代码块的专项处理。作者指出传统解析器的主要问题在于无法区分代码块内外的上下文，导致语法解析混乱。文章提出两种状态机实现方案：预处理器模式和渲染器模式，分别通过预处理文本标记和渲染时分流来解决问题。核心实现展示了一个基于有限状态机（FSM）的流式解析器，通过维护inCodeBlock等状态变量来正确识别代码块边界。对于更复杂的嵌套场景，还介绍了使用状态栈管理多重语法嵌套的进阶方案。这种状态机驱动的方法有效隔离了代码块
2026-08-11 10:53:41
47
原创 流式 Markdown 渲染完全指南【二】
《缓冲渲染法：通用的Markdown流式解析方案》摘要 本文提出了一种缓冲延迟渲染方法解决Markdown流式解析的闪烁问题。核心思路是将完整内容送去渲染，不完整残段留在缓冲区继续等待。关键实现包括： 检测未闭合语法标记（代码块、加粗、链接等） 寻找安全切分点（优先按换行切分） 最小块阈值控制避免频繁解析 该方法通过简单正则匹配解决了80%的闪烁问题，但存在代码块内部误判、复杂嵌套语法处理不足等局限。文章预告下一步将引入状态机方案，通过跟踪解析上下文实现更精准的判断。缓冲渲染法作为通用解法，平衡了实现复杂度
2026-08-06 09:02:26
45
原创 流式 Markdown 渲染完全指南【一】
本文分析了流式Markdown渲染中的"标签截断"问题本质，即Markdown语法闭合特性与AI流式输出的追加特性之间的冲突。作者通过代码块示例展示了DOM剧烈变化导致的页面闪烁现象，指出朴素的全量解析方案会引发性能雪崩（O(n²)复杂度）和视觉体验问题。文章特别强调代码块是最大痛点，因其特殊字符、长尾特性和大视觉占比。最后预告将介绍缓存延迟渲染的解决方案，通过分离完整内容与残段来缓解80%的闪烁问题。全文揭示了流式渲染的技术挑战核心在于语法解析与增量更新的矛盾。
2026-08-03 08:58:57
68
原创 流式 Markdown 渲染完全指南【引子】
这篇文章摘要： 《流式Markdown渲染：AI时代前端的核心技术挑战》 摘要： 随着AI应用的爆发式增长，流式Markdown渲染从边缘场景演变为核心基础问题。文章剖析了这一技术挑战的深层背景：从ChatGPT引领的流式交互革命，到用户体验标准的迭代升级。作者将系统性地讲解从P5到P7的完整认知路径，包括流式数据结构、浏览器渲染机制、Markdown语法特性等关键技术点。系列文章采用问题驱动模式，每篇包含真实场景、原理剖析、可运行代码和局限分析，旨在帮助开发者掌握生产级架构能力，应对AI应用中的渲染性能挑
2026-08-01 08:32:14
234
原创 AI对话前端从入门到崩溃：一个长对话引发的五层优化战争【六】
本文总结了一个AI对话应用架构的决策矩阵和工程师进阶路线。技术选型需匹配场景规模：从简单Demo到企业级应用，分别对应不同层级的渲染、内存、Token管理等方案。工程师能力进阶分为五个阶段，从基础性能优化到系统架构设计，强调AI时代前端需扩展边界，理解大模型原理与全栈视角。核心启示是优化不能牺牲体验，数据流设计是关键，前端开发者需掌握跨领域知识才能构建智能流畅的AI产品。
2026-07-17 08:54:31
41
原创 AI对话前端从入门到崩溃：一个长对话引发的五层优化战争【五】
本文提出了一种服务端会话管理与分层存储相结合的AI应用架构方案。核心思想是将上下文管理从前端转移到后端，前端仅负责展示，后端则维护完整的上下文窗口、摘要和向量索引。实现方案包括：1）服务端会话管理架构，使用Redis缓存和数据库存储会话数据；2）前端热/温/冷三层存储策略（内存、IndexedDB、服务端API）；3）监控告警体系，通过Sentry监控内存占用并自动清理。该方案旨在构建更稳定、高效的AI应用，避免前端内存问题导致的崩溃风险。
2026-07-15 09:17:13
55
原创 AI对话前端从入门到崩溃：一个长对话引发的五层优化战争【四】
摘要： 本文探讨如何通过IndexedDB和SSE断线续传技术提升AI聊天应用的健壮性。针对页面刷新导致对话丢失问题，使用IndexedDB持久化存储会话数据，并结合乐观更新策略快速恢复。针对网络波动造成的SSE中断，利用Last-Event-ID机制实现断点续传。文章还提出采用归一化状态管理和Valtio优化高频流式更新的渲染性能，最后简要提及跨设备同步的解决方案。这些技术共同构建了具有持久化能力和抗中断特性的流畅对话体验。
2026-07-13 08:50:38
63
原创 AI对话前端从入门到崩溃：一个长对话引发的五层优化战争【三】
摘要： 大模型因上下文窗口限制存在“记忆丢失”问题，表现为对话轮次过多后AI遗忘早期内容。本文提出三种解决方案对比：滑动窗口（低成本但失忆风险高）、摘要压缩（推荐方案，平衡信息保留与成本）和结构化记忆（最高效但需额外存储）。其中摘要压缩通过动态生成历史摘要（保留关键信息）结合最近对话，显著优化记忆管理。同时强调需前端透明化提示用户上下文截断状态，避免体验割裂。核心在于根据场景权衡信息保留度与资源消耗。
2026-07-10 07:55:02
53
原创 AI对话前端从入门到崩溃：一个长对话引发的五层优化战争【二】
摘要：本文探讨了虚拟滚动场景下内存泄漏的排查与解决。通过Chrome Memory面板分析，揭示了闭包引用、未清理的事件监听器和失控定时器等内存泄漏元凶。文章提出了三板斧解决方案：限制队列长度并清理大对象引用、使用事件委托替代独立绑定、及时清理定时器和Blob URL。优化后，内存占用从870MB降至210MB，Detached DOM节点和残留定时器问题完全解决，显著提升了应用稳定性。
2026-07-08 08:54:19
70
原创 AI对话前端从入门到崩溃：一个长对话引发的五层优化战争【一】
摘要： 本文针对长对话场景下页面卡顿问题，提出虚拟滚动+分页加载的解决方案。通过Performance面板分析发现DOM节点过多导致重排性能瓶颈。首先设计分页接口按需加载数据；其次使用react-window实现动态高度虚拟滚动，配合高度缓存优化；最后通过自定义Hook实现智能滚动锁定，在流式输出时不干扰用户浏览。优化后DOM节点减少98%，滚动FPS提升至60帧，但需注意内存占用问题。方案平衡了性能与用户体验，适用于高频更新的长列表场景。
2026-07-06 08:01:37
228
原创 AI对话前端从入门到崩溃：一个长对话引发的五层优化战争【引子】
本文以一场前端面试对话为引子，揭示AI长对话场景下的核心痛点。候选人提出的"清空消息列表"方案虽然能缓解页面卡顿，却牺牲了AI的上下文记忆，暴露了技术方案的局限性。文章深入分析了长对话引发的四重灾难：渲染卡顿、内存溢出、上下文超限和体验断裂，并提出了五层递进式解决方案框架，从基础的虚拟滚动到服务端会话存储，形成完整的性能优化路线图。该系列旨在帮助开发者从表层现象深入到底层架构，系统性地解决AI对话场景的复杂性挑战。
2026-07-04 10:37:40
98
原创 前端部署“三层漏斗”完全指南：从CI/CD到自动回滚的工程化实战【基石】
摘要：本文深入解析前端部署的核心原理，围绕HTTP缓存策略与构建哈希展开。从浏览器缓存决策链路（强缓存→协商缓存→缓存淘汰）剖析最佳实践，强调HTML禁用强缓存、静态资源使用immutable指令的重要性。详解Webpack/Vite构建工具的哈希进化（contenthash为最优选），并指出浏览器LRU算法对缓存的潜在影响。最后提供Nginx+CDN的实战配置方案，避免常见陷阱。核心结论：通过精准控制缓存与哈希策略，实现“HTML实时更新，静态资源永久缓存”的高效部署架构。
2026-06-24 10:41:42
267
原创 前端部署“三层漏斗”完全指南：从CI/CD到自动回滚的工程化实战【开题】
摘要：本系列面向中高级前端开发者，系统探讨前端部署优化的核心技术。内容涵盖HTTP缓存策略、构建哈希原理、蓝绿/金丝雀发布实施要点、CDN加速与容灾方案、Sourcemap安全防护、性能监控指标采集，以及自动化CI/CD流水线设计。重点剖析Webpack/Vite差异化处理、流量调度算法、多级容灾策略等实战场景，并提供Nginx配置、Docker优化等具体实现方案，形成从部署到监控的完整技术闭环。
2026-06-24 10:41:12
335
原创 下篇：打造可观测的异步加载防御体系
本文摘要：探讨构建企业级异步加载防御体系的治理方案，从可观测性、安全发布到复杂架构适配。首先提出多维监控指标体系设计，涵盖性能、稳定性、资源及业务指标，并通过数据采集与现有监控系统集成实现全链路观测。其次介绍基于功能开关的灰度发布机制与自动化回滚策略，确保发布安全。最后针对微前端和SSR/SSG等复杂架构提出适配方案，包括共享缓存、统一调度等优化手段。文章还展望了机器学习预测加载等智能优化方向，形成从技术实现到体系治理的完整解决方案。
2026-04-24 06:30:00
83
原创 中篇：构建弹性的异步组件
本文探讨了构建弹性异步组件的前沿方案。从基础的defineAsyncComponent和React.lazy出发，分析了现有方案的脆弱性，提出了一套增强型异步加载架构。
2026-04-23 08:15:00
86
原创 总篇：异步组件加载的演进之路
《异步组件加载的演进之路：从基础拆分到企业级防御体系》系列文章探讨了前端异步加载技术从简单实现到复杂系统的演进过程。文章分为三个层级：基础增强（解决单组件可用性）、全局资源管理（实现系统可控性）和可观测防御体系（确保持续优化）。中篇将提供智能重试和缓存管理的实战代码，下篇则深入企业级监控与架构适配方案。该系列不仅提供技术实现，更构建了一套完整的异步加载认知框架，帮助开发者应对微前端、SSR等复杂场景下的性能挑战，建立可持续优化的前端基础设施。
2026-04-22 08:30:00
82
原创 从术到道：构建企业级异步组件加载方案的设计哲学与实现精要
本文探讨了基于Vue的企业级异步组件加载方案，从基础实现到完整状态管理。核心设计理念是将异步加载视为包含加载、重试、降级等状态的生命周期。方案包含三个核心模块：useAsyncComponent控制器、AsyncLoading加载态组件和AsyncFallback错误态组件。
2026-04-21 09:15:37
75
原创 前端性能优化的底层逻辑：从“会写代码“到“会诊断问题“的进阶之路
跳出具体技术栈，本文构建了一套前端性能优化的通用方法论。首先阐述关键渲染路径（CRP）原理，提出"最小改动验证"的科学优化流程；继而建立"网络层-资源层-渲染层-计算层"四层分析模型，明确各层优化手段与边界；随后完善从本地Lighthouse验证、线上真实用户监控（RUM）到性能预算防控的完整闭环；最后针对preconnect滥用、Web Worker序列化开销、虚拟滚动限制等场景给出避坑指南，并提供可直接使用的面试STAR话术。本文适用于React/Vue双栈开发者及准备前端面试的工程师，帮助建立"诊断-
2026-04-20 07:30:00
412
原创 下篇：深入浅出：iframe 沙盒环境下的 SessionStorage 劫持与完全隔离方案
简单的存储劫持已无法应对复杂的生产环境挑战。本文记录了一次真实的安全攻防演练，我们发现了 iframe 沙盒中 SessionStorage 可被跨域劫持的重大漏洞。为此，我们设计并落地了一套企业级的三层防御体系：从快速的通信层修复（L1），到根本的存储代理与命名空间隔离（L2），再到主动的运行时监控与防护（L3）。方案涵盖完整的架构设计、性能优化、渐进式部署策略、测试套件，并与 W3C 标准对比，最终沉淀为一套可开源的安全框架。这不仅是技术方案，更是一套可复用的安全架构方法论。
2026-04-17 07:15:00
341
原创 中篇：手把手拦截——iframe 沙盒 SessionStorage 隔离的轻量级实践
你是否遇到过同源 iframe 中第三方组件误删或覆盖主应用 SessionStorage 数据的困扰？本文深入剖析了此问题的根源——同源策略下的存储共享机制，并提供了一个轻量级、非侵入式的运行时劫持方案。通过重写 sessionStorage 的核心 API 并自动添加命名空间前缀，我们实现了存储的完美隔离。文章包含完整的 Vue 3 示例代码、原理解析、安全性考量及多种边界情况处理，助你快速解决微前端及组件集成中的数据冲突难题。
2026-04-16 07:00:00
383
原创 总篇：iframe沙盒存储隔离：从紧急补丁到企业级防御体系的完整指南
在微前端与第三方组件集成的浪潮下，iframe 沙盒环境中的 SessionStorage 安全问题，正从一个隐秘的“技术细节”演变为可能引发数据泄露、权限逃逸的“阿喀琉斯之踵”。本系列文章，将为你完整呈现我们如何从一次真实攻防演练中发现致命漏洞，到构建一套经过生产验证的三层纵深防御体系的全过程。
2026-04-15 09:19:01
517
原创 一个轻量级 Vue3 轮播组件：支持多视图、滑动距离决定切换数量，核心原理与 Swiper 对比
本文介绍了一个轻量级 Vue3 轮播组件的实现，支持多视图、滑动距离决定切换数量等特性。核心功能包括循环播放、自动播放、拖拽滑动、导航分页等，代码仅400行。文章详细讲解了多视图布局计算、循环模式实现、滑动距离映射等核心原理，并与Swiper进行了功能对比。该组件适合轻量级项目，通过原生TypeScript编写，易于定制和维护。实现过程中解决了分页器点数计算、拖拽与点击区分等常见问题，为开发者提供了轮播组件的深入实现思路。
2026-04-14 09:06:11
154
原创 使用 VueUse 构建一个支持暂停/重置的 CountUp 组件
本文介绍如何利用 VueUse 的 useRafFn 构建一个功能强大的 CountUp 数字滚动组件。相比现有方案，该实现支持暂停、恢复、重置等命令式控制，并能动态调整目标值和动画时长。文章详细解析了核心 Hook useCountUp 的实现原理，包括动画循环控制、缓动函数应用和状态管理，并展示了如何封装为可复用的 Vue 组件。该方案零额外依赖，完全基于 Vue 3 组合式 API 和 TypeScript，适用于需要精细控制数字动画的场景。
2026-04-13 08:24:37
102
原创 前端性能优化实战：从5.2秒到1.9秒的代码级改造全记录
本文记录了一个电商商品详情页的性能优化完整过程。针对首屏加载5.2秒、Lighthouse评分32分的现状，采用分层优化策略：资源层通过智能图片组件实现WebP格式自适应与懒加载，构建层借助Webpack/Vite的manualChunks精细化分割代码，渲染层利用Web Workers将长任务从主线程剥离，网络层实施Service Worker的Stale-While-Revalidate缓存与关键资源预加载。优化后LCP降至1.9秒，Lighthouse提升至89分，跳出率下降28%。文中提供全部可运行
2026-04-11 07:03:28
345
原创 前端性能优化：从“术“到“道“的完整修炼指南
针对前端工程师在性能优化中"背了技巧却不会用"的普遍困境，本文提出"术道结合"的双层学习路径。"术"篇聚焦代码实战，通过一个电商详情页从5.2秒优化到1.9秒的完整案例，提供可直接复用的Vue 3/Vite配置、Web Worker组件和缓存策略；"道"篇升华至方法论层面，建立"网络-资源-渲染-计算"四层优化模型，涵盖从测量、验证到监控的闭环体系，并给出面试话术与避坑指南。两篇文章形成"先动手、后动脑"的认知递进，帮助读者既解决眼前问题，又建立长期可迁移的优化能力。
2026-04-10 07:45:24
318
原创 前端架构演进：基于AST的常量模块自动化迁移实践
前端常量模块自动化迁移实践 本文介绍了一次基于AST的前端常量模块自动化重构实践。针对项目中存在的常量管理混乱问题（如Tree Shaking失效、命名空间冗余等），团队开发了两个自动化迁移脚本： 常量文件转换：将export default对象转换为多个export const语句，保留注释并支持TS语法 业务代码迁移：动态发现常量文件，识别旧的导入模式，自动替换为直接引用并生成具名导入 方案采用Babel工具链实现AST解析与转换，具备完整防御机制（文件备份、白名单验证等）
2026-04-08 13:01:12
324
原创 探索Vite深入 Rollup 分块插件：从零实现一个智能 分包 工具
为了解决这些问题，我们开发了 rollup.plugin.robin-build 插件（纯 JS/TS 版本，下文简称“本插件”）。它提供了一套声明式的分块规则配置，支持路径匹配、引用次数阈值、优先级排序等高级特性，让代码分割变得可预测、可维护。
2026-04-07 13:21:51
185
原创 老大语录三 谈需求变更
• 不要强制定义谁的权利，论述清楚底层逻辑更重要。团队成员有权利知道这些。• 团队只有在一个底层价值观下，才能达到士气上的一致，才不会疲于解释各种现象，安抚各种情绪。• 让感知利害关系的人做决策。且敬畏不同的专业。• 方案要基于人性但不是以此为中心，当人性与客观事实存在矛盾时，需要像现实妥协，但仍然充分考虑人性。需求变更，研发人员最讨厌出现的情形。这个是根本上的反感，即使抛开需求变更带来的计划打乱，可能带来的大家需要加班加点填补变更带来的成本。
2024-03-12 13:11:45
1148
原创 全网最详细的从0到1的turbo pnpm monorepo的前端工程化项目[组件篇四]
在这实现第一个组件space[间距]到这里，第一个间隔组件开发完成啦，很简单，按照自己定义的打包规则去处理自己的组件，所以在规则下，开发组件就像自己的开发页面一样，唯一的就是开发组件要有统一的设计和思考，不然长时间下来很难把控。
2024-03-12 13:10:50
689
原创 老大语录二 谈规划
在这之间就有了取和舍，并且也更专业的满足的客户的需求。Tob 类产品需要明确该功能的使用方是谁，一般在什么情况下会切入到该功能，用户看到该功能时下意识希望该功能输出哪些信息，该功能在交互中的期望反馈是什么。比如常见的审批流程，看是就是简单的审批流，往往底层的工作流引擎是需要沉淀的，很多团队也依靠这些沉淀开发出工单系统和OA系统。产品的定位，不同专业功能的敬畏，以及不明确场景下的减法。以上就是对产品功能规划判断的思考，也许有更好的评判公式，但实际经验中的总结也未免不是一种高效的方式来帮助我们来正确的做事。
2024-03-06 18:45:59
876
原创 全网最详细的从0到1的turbo pnpm monorepo的前端工程化项目[组件篇三]
接上文的全网最详细的从0到1的turbo pnpm monorepo的前端工程化项目[组件篇二]，进行详细编写rollup打包脚本
2024-03-06 18:36:19
759
原创 全网最详细的从0到1的turbo pnpm monorepo的前端工程化项目[组件篇一]
我们在使用第三方各种UI库，比如element、ant design等提供的ui组件，发现他们打包万变不离其宗，看似复杂其实也不复杂，只要明白其中的原理，抽丝剥茧，就很简单啦！本文接上文的工程项目，进行接下来的工作。当然一个人还是很难和大厂推出的产品进行对比，但是我们不是为了对比，我们是为了提高自己，让能力更近一步。很多博客上博主也有很多讲解rollup的网站不是对api的详细抄袭就是对api文档的解释，基本上没有实战的教程；纯属个人见解，感觉写的很模糊，没有实战性！
2024-02-28 21:54:57
912
1
原创 老大语录一 谈管理
但建立流程时往往会受到部分人员的特殊甚至是个人诉求，如此叠加形成了复杂冗余的流程，更可怕的是这会以所谓“本企业特色”掩盖了优化的动力。之所以会出现对组织人员的素质会有过高的要求，是因为往往事务进展不顺时会发生在某个个体身上，我们往往会开始纠结于某个人如果有更强的职业素质或者综合能力(这里不讨论专业能力不够的情况下)，事故就不会发生。并且一般事物来讲，人才的贡献边际效应一定是递减的。管理逻辑是根据业务需要组建适合的组织，梳理出主要的业务流程(主业务和支撑业务)，制定合适的管理制度约束组织和流程的行为。
2024-02-28 21:53:30
766
原创 全网最详细的从0到1的turbo pnpm monorepo的前端工程化项目[组件篇二]
本来不想写用的插件单独列出来介绍的，考虑再三还是写吧，正好好好真正的在加深一次印象吧！
2024-02-27 08:25:37
720
原创 手把手教你pkg将Node.js项目打包为可执行文件
突然接到一个演示的需求，背景是这样的，需要在客户那边部署一个项目，但是这个项目需要的服务器的配置比较高，客户那边也没有好的机器，为了看系统的功能性，数据可以不就有真实性，也能慢走，这个时候我给项目经理说，可以考虑只部署前端，但是接口数据怎么来呢？
2024-02-25 06:15:00
3401
原创 全网最详细的从0到1的turbo pnpm monorepo的前端工程化项目[vitePress篇]
一个好的工程化项目，必然有一个好的文档管理，这样才算称得上一个好的工程化，也大大提高后面的工作和文档查找的效率！
2024-02-19 17:18:00
1428
原创 全网最详细的从0到1的turbo pnpm monorepo的前端工程化项目[搭建篇]
本文从实战出发，初步单间一个为 turbo的基础项目工程项目，本文我估计，是全网唯一一个手把手第一次真正从0到一的完整的教程，纯属个人见解，因为我没有看到像我这么全的！，本文旨意在搭建一个vue3的组件库，后面还有更多的文章信息，我也不知道后面文章什么时候更新，本人很赖！希望搭建鼓励鼓励我！
2024-02-18 20:30:00
2190
原创 手把手教你Termius去除登录并解除限制，非常简单
Termius 8 去除登录并解除限制 多协议远程管理软件 for Mac or for Win
2024-01-30 13:58:02
5147
Ref Effect baseHandler reactive Proxy Vue 3
2024-01-04
websocket封装使用心跳检测+断线重连
2020-01-16
mvvm双向绑定原理和实现
2020-03-20
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人