卡顿减少50%，这次前端性Neng排查成功了吗？说实话，刚开始接到这个任务时我心里还是有点没底的。

咱就是说前端性Neng优化这事儿吧，得一步步来不Neng急。

项目采用了Astro + React + Nano Stores + JSON Forms这一组合，核心考虑是“输出静态内容 + 局部高交互编辑 + 低心智状态管理 + 结构化表单生成”。

害，为啥选这个组合呢？主要是因为项目需要输出静态内容，同时局部交互编辑又是刚需。

Astro Astro 默认以静态 HTML/CSS 输出、默认不发送不必要客户端 JS，并通过 client:* 指令只为需要交互的组件注水。这与本项目“以静态导出为主，编辑器局部交互为辅”的模式匹配度hen高。 同时client:only="react" 允许将编辑器作为纯客户端岛屿挂载，减少静态内容链路的运行时负担。

线上复现路径稳定：当我点击 Tab 从“原始JSON”切到“表单模式”，UI 明显顿挫，点击切换时有明显体感的卡顿，React Profiler 出现长提交和多段 Mount。

火焰图告诉“哪里热”，堆栈告诉“为什么热”。Zui终确认的链路是：

React 编辑器包含 tab 切换、动态 block 列表、受控输入、异步预览反馈等复杂交互，React 在组件化拆分和状态驱动geng新上geng成熟，Neng把“可变交互域”限制在编辑器岛屿内部，不污染静态渲染主链路。

从 flamegraph 和 timeline kan，问题不是“某个函数单点慢”，而是“切换动作触发了重型渲染链 + 被动副作用处理”。

下面把与性Neng判断直接相关的旧 trace 事件放在一个代码块中，便于对外阅读：

// 修复前 Trace-20260520T100050.json// 观测窗口：.75s"initialBreadcrumb": { "window": { "range": }}// 主线程长任务{"dur":,"name":"RunTask","pid":,"tid":}{"dur":,"name":"RunTask","pid":,"tid":}{"dur":,"name":"RunTask","pid":,"tid":}{"dur":,"name":"RunTask","pid":,"tid":}

切换时进入了大工作集，不是普通 Tab UI geng新。

修复不是简单加防抖，而是从 订阅粒度 和 挂载策略 两个方向同时处理：

Nano Stores Nano Stores 的关键特征是原子化 store、体积小、框架适配广；React 侧通过 @nanostores/react 的 useStore 订阅即可驱动geng新。Zui重要的是Nano Stores也是Astro官方推荐的跨框架的全局状态管理框架，特别适合项目实际开发需要。 对本项目来说articlemodefileNamepanelWidth 这类状态适合拆成小粒度 store，既Neng持久化，又Neng降低无关联动渲染。

// frontend/stores/editorStore.tsexport const $editorMode = persistentAtom<EditorMode>;export const $editorFileName = persistentAtom<string>;export const $panelWidth = persistentAtom<number>;export function setMode { $editorMode.set;}

挂载策略：重型表单树常驻复用

改为“挂载后隐藏复用”而非每次切换卸载再挂载；JSON 模式下延迟 formKey重置，避免隐藏树反复重建。