• 请不要在回答技术问题时复制粘贴 AI 生成的内容
chenliangngng
V2EX  ›  程序员

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

  •  
  •   chenliangngng · Nov 20, 2019 via Android · 4387 views
    This topic created in 2385 days ago, the information mentioned may be changed or developed.

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

    Supplement 1  ·  Nov 20, 2019
    我们大项目分几个小项目,有几个项目是在原 JQ 轮子基础上改的,为了开发效率移植到 vue 上,也有部分新功能是沿用 JQ 开发的,所以有一些 JQ 代码。

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

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

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

    反正最后都是像素。
    ”理论上来说,你两个用哪个都能开发出性能一样的产品“ 理论上来说,在 Web 平台上,jQ 的性能天花板会比较高。当然这个不好说,毕竟都 jQ 了,不如直接 http://vanilla-js.com 性能最好
    KuroNekoFan
        16
    KuroNekoFan  
       Nov 20, 2019
    jq 的问题不在于 performance...
    seki
        17
    seki  
       Nov 21, 2019
    所以用 perf 工具分析一下呀,问题出在哪个组件,哪个函数,大体的范围是能定位到的
    overkazaf
        18
    overkazaf  
       Nov 23, 2019
    当然是和老板谈时间分几期迭代优化慢慢解啦
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   3259 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 74ms · UTC 14:06 · PVG 22:06 · LAX 07:06 · JFK 10:06
    ♥ Do have faith in what you're doing.