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