为什么 JSON 格式化这么慢

[awesomes]

半个月前发了一个新的JSON 格式化工具，上线以来获得了一些用户的反馈，很多同学反馈 UI 还可以，但是解析有点慢，特别是遇到大文件时各种操作都会变得很卡，于是想到，这不是虚有其表么，如果一个工具连最基本核心的功能都体验很慢，那么其它的功能也就显得多余了。

于是开始了分析和优化，慢的原理其实很简单，不在 JS 而在于需要渲染那么多的 DOM 节点，于是对 DOM 这一块进行了优化，按需渲染 DOM ，个人测试目前来看还算比较快，有兴趣的热心网友也可以一起测测（小众网友提供的测试 JSON https://api.warframestat.us/pc/zh_CN) 76.4kb 或者可以找个更大的，也可以横向对比一下你目前在用的其它在线解析网站，因为时间关系后续还会有更细化的优化。

[3dwelcome]

你可以考虑把 DOM 全部替换为 SVG ，然后把 JS 分析模块替换成 WASM 。

实测上千个 SVG 没什么压力。换成海量 DOM 就不好说了。

[awesomes]

@3dwelcome 渲染性能上 SVG 比 DOM 应该没啥优势，之前的 DOM 不是上千，是上万了，WASM 倒是可以考虑一下

[xiangyuecn]

大文件，文本框的粘贴显示也是一个性能非常低的地方，4M 文件基本上就要卡半天才能粘贴进 textarea 里面，所以可以提供文件选择 input ，专搞超大文件

100kb 内的，基本上浏览器控制台就够用了😁

[awesomes]

@xiangyuecn 支持上传的，直接往里面托文件即可

[rekulas]

按需展示确实是个好办法 大规模节点展示现在一些公司在尝试 canvas 渲染也是个方向

[cweijan]

看到你还搞了 vscode 插件, 偷偷告诉你, vscode 就可以对 json 进行格式化.

[awesomes]

@cweijan 哈哈，偷偷告诉你，这个插件并不是对 JSON 进行格式化，是用来做分享的，不可能在 vsocde 里面去做格式化，显得多余了。

[awesomes]

@rekulas 目前能做到的就是按需展示了，至于 canvas 渲染，性能比 DOM 渲染好吗，有没有相关文档呢

[aceimnorst]

那么大的 json 不是人看的吧

[rekulas]

https://www.kirupa.com/html5/dom_vs_canvas.htm
我对 canvas 的看法是 由于不需要在内存中维护所有对象，所以资源占用非常低(当然必须优化好渲染算法)，另一点是未来 wasm 流行起来很可能直接通过 wasm 构建画布，速度和效率都不是 dom 渲染能比的
不过现阶段都还在探索，毕竟 dom 很容易构建，canvas 渲染难度要大得多

[awesomes]

@rekulas 了解

[makelove]

好家伙把 JSON 格式化都做出花来了，杀鸡用牛刀了吧，有这开发能力感觉做点别的更好