V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
awesomes
V2EX  ›  分享创造

为什么 JSON 格式化这么慢

  •  
  •   awesomes · 176 天前 · 2097 次点击
    这是一个创建于 176 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    12 条回复    2022-02-17 13:39:53 +08:00
    3dwelcome
        1
    3dwelcome  
       176 天前
    你可以考虑把 DOM 全部替换为 SVG ,然后把 JS 分析模块替换成 WASM 。

    实测上千个 SVG 没什么压力。换成海量 DOM 就不好说了。
    awesomes
        2
    awesomes  
    OP
       176 天前
    @3dwelcome 渲染性能上 SVG 比 DOM 应该没啥优势,之前的 DOM 不是上千,是上万了,WASM 倒是可以考虑一下
    xiangyuecn
        3
    xiangyuecn  
       176 天前
    大文件,文本框的粘贴显示也是一个性能非常低的地方,4M 文件基本上就要卡半天才能粘贴进 textarea 里面,所以可以提供文件选择 input ,专搞超大文件

    100kb 内的,基本上浏览器控制台就够用了😁
    awesomes
        4
    awesomes  
    OP
       176 天前
    @xiangyuecn 支持上传的,直接往里面托文件即可
    rekulas
        5
    rekulas  
       176 天前
    按需展示确实是个好办法 大规模节点展示现在一些公司在尝试 canvas 渲染也是个方向
    cweijan
        6
    cweijan  
       176 天前
    看到你还搞了 vscode 插件, 偷偷告诉你, vscode 就可以对 json 进行格式化.
    awesomes
        7
    awesomes  
    OP
       176 天前
    @cweijan 哈哈,偷偷告诉你,这个插件并不是对 JSON 进行格式化,是用来做分享的,不可能在 vsocde 里面去做格式化,显得多余了。
    awesomes
        8
    awesomes  
    OP
       176 天前
    @rekulas 目前能做到的就是按需展示了,至于 canvas 渲染,性能比 DOM 渲染好吗,有没有相关文档呢
    aceimnorst
        9
    aceimnorst  
       175 天前   ❤️ 1
    那么大的 json 不是人看的吧
    rekulas
        10
    rekulas  
       175 天前
    https://www.kirupa.com/html5/dom_vs_canvas.htm
    我对 canvas 的看法是 由于不需要在内存中维护所有对象,所以资源占用非常低(当然必须优化好渲染算法),另一点是未来 wasm 流行起来很可能直接通过 wasm 构建画布,速度和效率都不是 dom 渲染能比的
    不过现阶段都还在探索,毕竟 dom 很容易构建,canvas 渲染难度要大得多
    awesomes
        11
    awesomes  
    OP
       175 天前
    @rekulas 了解
    makelove
        12
    makelove  
       173 天前
    好家伙把 JSON 格式化都做出花来了,杀鸡用牛刀了吧,有这开发能力感觉做点别的更好
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   4462 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 02:38 · PVG 10:38 · LAX 19:38 · JFK 22:38
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.