一、背景
之前写了一个纯前端的 JSON 在线查看器（文末地址），核心交互是：粘贴 JSON → 格式化 → 右侧生成可折叠的树形视图。平时联调小报文一切正常，直到有人贴了一份 8 万行的接口导出数据——点"全部展开"直接白屏转圈。
这篇文章记录整个定位和优化过程，所有数据均在 Chrome、1600×900 视口下实测。
二、整体架构
单文件实现，零第三方依赖，分两层：
· 纯函数层（无 DOM 依赖）：JSON 校验器、行列定位、格式化/压缩/转义、主题状态 · DOM 层：树渲染、事件、查找、右键菜单
校验没有用 try/catch 拿 JSON.parse 的报错信息（position 是字符偏移量，对用户没意义），而是手写了一个递归下降校验器，失败时返回 { pos, message }，再换算成行列号：
// pos 往前数 \n 得行号，到行首距离得列号 var before = text.slice(0, pos); var line = before.split("\n").length; var col = pos - before.lastIndexOf("\n");
这样报错可以直接给用户「第 12 行，第 34 列附近：字符串缺少结束引号」。
三、树形渲染：为什么会有 10 万个 DOM 节点
树采用 ul/li 嵌套，每个节点由 6~13 个元素组成（li、行容器、逐层缩进 span、展开箭头、类型图标、锚点、值分段 span）：
li.youfang-tree-node div.youfang-tree-node-el // 整行，可点击选中 span.youfang-tree-node-indent // 逐层缩进 + 连接线 span.youfang-tree-ec-icon // +/- 展开箭头（CSS 伪元素绘制） span.youfang-tree-node-icon // 类型图标（按值类型分色） a.youfang-tree-node-anchor // key : value 标签 ul.youfang-tree-node-ct // 子节点容器（初始 display:none）
问题就出在这里：渲染是全量递归的，折叠只是 display:none，DOM 一个不少。
实测数据（点「格式化」后）：
· 1 万行（218KB）：96,773 个 DOM 节点 · 8 万行（1.7MB）：762,253 个 DOM 节点
10 万个节点意味着什么？默认状态下折叠着还好，一旦点「全部展开」——
四、优化一：content-visibility，布局耗时 582ms → 50ms
用 performance.now() 分段测量 1 万行数据的「全部展开」：
优化前： · JS 状态切换（class/display 改写）：35ms · 浏览器布局 + 绘制：582ms ← 瓶颈在这
10 万个节点同时参与布局计算，每行还有伪元素连接线要绘制。但布局有个特点：屏幕外的节点算了也白算，用户根本看不到。
CSS 的 content-visibility: auto 就是干这个的——告诉浏览器该元素在滚出视口时可以跳过布局和绘制，配合 contain-intrinsic-size 提供占位尺寸避免滚动条跳动：
.youfang-tree-node-el { line-height: 22px; content-visibility: auto; contain-intrinsic-size: auto 22px; }
两行 CSS，DOM 结构零改动。单独实测：全部展开布局 582ms → 182ms。
五、优化二：事件委托，砍掉 20 万个监听器
原始实现里每个节点行挂了 click 监听、容器节点再挂 click（箭头）+ dblclick，10 万节点约 20 万个监听器，建树期逐个 addEventListener 的开销也水涨船高。
改造为在树的根容器上统一委托：
treeRoot.addEventListener("click", function (e) { var nodeEl = e.target.closest(".youfang-tree-node-el"); if (!nodeEl) return; e.preventDefault(); var ec = e.target.closest(".youfang-tree-ec-icon"); if (ec && ec.getAttribute("data-toggle") === "1") { // 点的是展开箭头：只切换状态，不选中 var li = nodeEl.closest("li"); toggleNode(nodeEl, li.querySelector(":scope > ul"), ec, isLastOf(nodeEl)); return; } selectNode(nodeEl); // 点整行：选中 });
注意一个交互细节：箭头点击要「切换但不选中」，行点击要「选中不切换」，委托里用 closest 区分即可，行为和原来完全一致。
六、优化后总账
1 万行 JSON，粘贴 → 格式化 → 全部展开：
优化前 优化后
格式化 + 建树 JS 135ms → 66ms 格式化后首次布局 206ms → 73ms 全部展开 JS 35ms → 13ms 全部展开后布局 582ms → 50ms ───────────────────────────────────────── 整体感知耗时 ~950ms → ~200ms
8 万行（76 万节点）的格式化建树也从不可用变成了 1.3s 内完成。
几点经验总结：
- content-visibility: auto 是列表/树形场景性价比最高的优化，两行 CSS，不改结构，滚动同样受益
- contain-intrinsic-size 必须给，否则滚动条会跳动
- 大数量级 DOM 一律事件委托，addEventListener 的账要按节点数乘
- 优化前先分段打点，瓶颈往往不在你以为的地方——本例 JS 只有 35ms，真正的开销在布局
七、结语
以上就是全部优化过程。工具叫「有方 JSON 在线查看器」，纯前端运行、数据不上传服务器，免费无广告：
作者本人，欢迎试用拍砖。校验定位、转义还原、大文件展开这些功能都可以拿真实报文去压测，有问题欢迎评论区交流。
