半个月前发了一个新的JSON 格式化工具，上线以来获得了一些用户的反馈，很多同学反馈 UI 还可以，但是解析有点慢，特别是遇到大文件时各种操作都会变得很卡，于是想到，这不是虚有其表么，如果一个工具连最基本核心的功能都体验很慢，那么其它的功能也就显得多余了。
于是开始了分析和优化，慢的原理其实很简单，不在 JS 而在于需要渲染那么多的 DOM 节点，于是对 DOM 这一块进行了优化，按需渲染 DOM ，个人测试目前来看还算比较快，有兴趣的热心网友也可以一起测测（小众网友提供的测试 JSON https://api.warframestat.us/pc/zh_CN) 76.4kb 或者可以找个更大的，也可以横向对比一下你目前在用的其它在线解析网站，因为时间关系后续还会有更细化的优化。
 |
1
3dwelcome Feb 14, 2022
你可以考虑把 DOM 全部替换为 SVG ，然后把 JS 分析模块替换成 WASM 。
实测上千个 SVG 没什么压力。换成海量 DOM 就不好说了。 |
 |
3
xiangyuecn Feb 14, 2022
大文件，文本框的粘贴显示也是一个性能非常低的地方，4M 文件基本上就要卡半天才能粘贴进 textarea 里面，所以可以提供文件选择 input ，专搞超大文件
100kb 内的，基本上浏览器控制台就够用了😁 |
 |
4
awesomes OP @xiangyuecn 支持上传的，直接往里面托文件即可
|
 |
5
rekulas Feb 14, 2022
按需展示确实是个好办法 大规模节点展示现在一些公司在尝试 canvas 渲染也是个方向
|
 |
6
cweijan Feb 14, 2022
看到你还搞了 vscode 插件, 偷偷告诉你, vscode 就可以对 json 进行格式化.
|
 |
9
aceimnorst Feb 15, 2022  1
那么大的 json 不是人看的吧
|
|
10
rekulas Feb 15, 2022
https://www.kirupa.com/html5/dom_vs_canvas.htm
我对 canvas 的看法是 由于不需要在内存中维护所有对象，所以资源占用非常低(当然必须优化好渲染算法)，另一点是未来 wasm 流行起来很可能直接通过 wasm 构建画布，速度和效率都不是 dom 渲染能比的 不过现阶段都还在探索，毕竟 dom 很容易构建，canvas 渲染难度要大得多 |
 |
12
makelove Feb 17, 2022
好家伙把 JSON 格式化都做出花来了，杀鸡用牛刀了吧，有这开发能力感觉做点别的更好
|
Select Language