V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
chenliangngng
V2EX  ›  程序员

虚拟 dom 的 diff 算法大概能比 jQ 提升多少性能?

  •  
  •   chenliangngng · 2019-11-20 18:37:45 +08:00 via Android · 3560 次点击
    这是一个创建于 1837 天前的主题,其中的信息可能已经有所发展或是发生改变。

    最近在搞性能优化,测试的意思是点击按钮就很卡(仅仅前台交互就很卡) 项目是 vue+JQ 搭的,JQ 部分占 40%. 如果把 JQ 都优化了,可以对性能有多少提升呢? 或者说优化的方向就不对?

    第 1 条附言  ·  2019-11-20 21:09:56 +08:00
    我们大项目分几个小项目,有几个项目是在原 JQ 轮子基础上改的,为了开发效率移植到 vue 上,也有部分新功能是沿用 JQ 开发的,所以有一些 JQ 代码。

    还是解决问题吧,如果全部换掉 jq 代码肯定是要耗费很多时间的。如果这种优化方案效果不行的话,我也能早点考虑其他办法
    18 条回复    2019-11-23 20:42:59 +08:00
    Yumwey
        1
    Yumwey  
       2019-11-20 18:46:40 +08:00
    你起码先确定是 JQ 导致的吧... 看下开发调试的性能监控吧
    reus
        2
    reus  
       2019-11-20 18:47:55 +08:00 via Android
    如果你用 jquery 可以精确地做出 dom 操作,不多也不少,那没有什么 diff 算法可以比你更快。

    既然用 vue 了,那还用啥 jquery ?谁做这个决定的,可以认为是傻逼。
    tinkerer
        3
    tinkerer  
       2019-11-20 18:53:28 +08:00
    我也觉得奇怪,用 vue.js 了说什么还用 JQuery
    OSF2E
        4
    OSF2E  
       2019-11-20 18:55:29 +08:00   ❤️ 3
    “买了台 Macbook,第一时间装上了 windows”,卡是必须的,是心态的问题
    2055
        5
    2055  
       2019-11-20 18:58:17 +08:00
    得看你怎么使用 JQuery 的。例如你修改 list 里的一条数据,如果直接使用.html(list)重新渲染整块,那虚拟 dom 要快不少。
    zaul
        6
    zaul  
       2019-11-20 19:24:51 +08:00
    vue 搭配 jq 是什么骚操作
    hoyixi
        7
    hoyixi  
       2019-11-20 19:26:30 +08:00
    哈哈, 这搭配,很想看你们的代码,方便贴吗
    manami
        8
    manami  
       2019-11-20 19:28:14 +08:00 via Android   ❤️ 1
    看不懂这操作
    ayase252
        9
    ayase252  
       2019-11-20 19:31:03 +08:00 via iPhone
    没看懂......同时用 vue 和 jq 渲染吗?
    zhw2590582
        10
    zhw2590582  
       2019-11-20 19:33:29 +08:00 via iPhone
    对于现代浏览器,要前端操作 dom 发生卡顿,起码得一次性操作几百条数据吧
    Torpedo
        11
    Torpedo  
       2019-11-20 19:58:28 +08:00   ❤️ 2
    你这个思路就不对。无论 vue 还是 jquery 都是在操纵 dom。有性能问题,就是你操纵 dom 的方式有问题。并不是 jq 或者 vue 的问题。
    vue 也就是开发效率比 jq 有优势。
    理论上来说,你两个用哪个都能开发出性能一样的产品
    gdrk
        12
    gdrk  
       2019-11-20 20:22:46 +08:00
    看人。。。
    murmur
        13
    murmur  
       2019-11-20 20:27:26 +08:00
    批量 insert 的时候 jq+template 的性能反倒是最高,小规模组件 diff 的时候 vue 和 jquery 都不是问题,如果是 dom 部分瓶颈先反思页面是不是太复杂,有没有分批渲染
    autoxbc
        14
    autoxbc  
       2019-11-20 20:30:48 +08:00   ❤️ 1
    尤雨溪:没有任何框架可以比纯手动的优化 DOM 操作更快...针对任何一个 benchmark,都可以写出比任何框架更快的手动优化

    https://www.zhihu.com/question/31809713/answer/53544875
    secondwtq
        15
    secondwtq  
       2019-11-20 20:31:39 +08:00
    楼主这问题确实没啥意义,不过 #11 的表述稍微有点问题,我尝试做个比喻:
    你要给一个 2D 游戏做场景美术,游戏不仅仅是 2D 的,而且画风不太真实,类似于日本冻鳗。那么我是弄个 3D 模型再渲染成 2D 画风呢,还是直接画一张 2D 图呢,前者大概能比后者提升多少工作效率?

    反正最后都是像素。
    ”理论上来说,你两个用哪个都能开发出性能一样的产品“ 理论上来说,在 Web 平台上,jQ 的性能天花板会比较高。当然这个不好说,毕竟都 jQ 了,不如直接 http://vanilla-js.com 性能最好
    KuroNekoFan
        16
    KuroNekoFan  
       2019-11-20 20:56:45 +08:00
    jq 的问题不在于 performance...
    seki
        17
    seki  
       2019-11-21 02:50:43 +08:00
    所以用 perf 工具分析一下呀,问题出在哪个组件,哪个函数,大体的范围是能定位到的
    overkazaf
        18
    overkazaf  
       2019-11-23 20:42:59 +08:00
    当然是和老板谈时间分几期迭代优化慢慢解啦
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2596 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 10:39 · PVG 18:39 · LAX 02:39 · JFK 05:39
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.