V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Southside
V2EX  ›  Vue.js

信创环境前端该不该升 vue3?

  •  
  •   Southside · 2022-09-26 17:02:03 +08:00 · 4717 次点击
    这是一个创建于 787 天前的主题,其中的信息可能已经有所发展或是发生改变。

    项目运行在信创环境下(国产 CPU ),现在用的是 vue2 ,在一些数据量大的场景下(几千条)有明显卡顿( 1-2s )。问下前端大佬们升 vue3 能解决吗?性能对比 vue2 有明显提升吗?

    第 1 条附言  ·  2022-09-27 08:56:43 +08:00

    感谢大家回复哈。这个优化主要是另外一个同事负责,他基本上能用的方法都用了,还是解决不了几个卡顿问题,所以才和我讨论要不要换框架。我觉得不应该换,换框架工作量肯定更大(不能摸鱼)。现在我知道的问题有三个:

    1. 树选择器在有几千条数据时做前端搜索很卡,后端搜索也有一定延迟(客户不喜欢)
    2. 数据量比较大的弹窗关闭有卡顿感
    3. getInfo接口有时候会超时,页面直接出不来
    21 条回复    2022-09-27 14:31:13 +08:00
    yamedie
        1
    yamedie  
       2022-09-26 17:06:30 +08:00
    升 vue3 解决不了这种问题, 列表太长就分页吧, 不能分页的话用虚拟滚动(virtual scroll)
    mscststs
        2
    mscststs  
       2022-09-26 17:07:54 +08:00
    如果你连卡顿的原因都没找到,就在想换框架的话,我觉得换框架多半也解决不了你的问题。

    建议打开浏览器 Performance 录制一下卡顿的 profile ,定位一下卡顿的原因先
    shanyuhai123
        3
    shanyuhai123  
       2022-09-26 17:27:11 +08:00
    看你使用的 UI 库,有的 UI 库的确是在 Vue3 才内置虚拟滚动。升级的话配套也得升级,需要评估下成本,不然做分页改造更简单。
    statumer
        4
    statumer  
       2022-09-26 17:29:46 +08:00 via iPhone
    页面卡顿应该 profiling ,怎么能卡顿就想着换框架?观察一下到底是多余的重排和 DOM 操作还是计算太复杂导致的。前端这块把优化做好性能提升 5 倍很正常。
    jydeng
        5
    jydeng  
       2022-09-26 17:33:25 +08:00
    从你的描述来看,解决卡顿的工作量应该比升级 3 更少,不一定非得升级。
    qbuer
        6
    qbuer  
       2022-09-26 17:51:38 +08:00
    可以直接用 vue3 测试一下数据量大的列表。
    snoopyhai
        7
    snoopyhai  
       2022-09-26 17:58:00 +08:00
    如果没有能力定位卡顿问题,可以尝试下你看中的 vue3 框架,如果解决目前问题,那就升级吧。
    wu67
        8
    wu67  
       2022-09-26 20:20:39 +08:00
    有用但是没那么有用. 我之前整的 1 到 6 千左右的数组, 该卡的还是会卡, 所以我干脆加了 loading, 然后手动过滤分页.

    你可以先就那个页面数据用 3 写个 demo, 看看实际效果满不满意, 再考虑要不要升. 不然还是花时间解决导致卡顿的瓶颈比较好
    gouflv
        9
    gouflv  
       2022-09-26 21:32:01 +08:00 via iPhone
    升 vue10 估计可以
    chunqiuyiyu
        10
    chunqiuyiyu  
       2022-09-26 21:46:10 +08:00
    不该,你现在只有页面卡顿的问题,换了之后不知道会新产生多少问题。
    cweijan
        11
    cweijan  
       2022-09-26 21:46:17 +08:00
    Hi, 我之前也有这个场景, vue2 使用了 https://github.com/u-leo/umy-ui, 效果不错; 最近调研了 vue3 的 naive ui 和 element plus, 测试结果是虚拟表格体验不如 umy-ui.
    sjhhjx0122
        12
    sjhhjx0122  
       2022-09-26 22:20:53 +08:00
    信创电脑的浏览器是那个呢?老火狐还是那些 chrome 套壳的,数据大就自己在前端分个页吧,要不就虚拟滚动。。换 vue3 没用的,我之前 ng 项目跑起来都卡,vue2 项目就别想升级 vue3 了,新项目再开 vue3 吧
    rabbbit
        13
    rabbbit  
       2022-09-26 22:24:42 +08:00
    换虚拟滚动
    试过 vxe-table 的虚拟树,1 万行 x 20 列 PC 端无压力
    NXzCH8fP20468ML5
        14
    NXzCH8fP20468ML5  
       2022-09-27 00:11:47 +08:00
    其实可以尝试用 Vue3 封装一个 web components 引入试试看
    Osk
        15
    Osk  
       2022-09-27 00:17:37 +08:00
    @sjhhjx0122 只需要知道火狐二次开发比较麻烦...

    其他的不敢乱透露了...
    Lighfer
        16
    Lighfer  
       2022-09-27 08:36:21 +08:00
    非必要别升,vue3 还有比较容易遇到的内存泄漏问题没解决呢,信创环境本身机器配置又低
    sqlNice
        17
    sqlNice  
       2022-09-27 09:34:33 +08:00
    1.对于那么多的数据是否有必要让 Vue 把他们变成响应式
    1.1 是否可以减少响应式的数据,比如 { id: 23, name: 'Filex', age: 18 ... } 其实你只需要 id 和 name,那么可以把对象中的其他 key 去掉后再给 UI 绑定数据

    2.对于你使用的树选择器 /弹窗,检查源码实现
    Nullnode
        18
    Nullnode  
       2022-09-27 10:41:38 +08:00
    如果是数据量大导致的卡顿,建议虚拟列表或分页。vue2 有单独的虚拟列表组件
    tuutoo
        19
    tuutoo  
       2022-09-27 10:44:16 +08:00
    如果项目比较大 直接升 Vue3 风险还是比较大的 要改的东西多, 还要测试.
    数据量比较大试下分页, 或者是虚拟滚动
    yqxxoo
        20
    yqxxoo  
       2022-09-27 14:30:33 +08:00
    虚拟滚动,大批量搜索别丢主线程去做,丢 Web Workers 或者 WAMS 里面去
    yqxxoo
        21
    yqxxoo  
       2022-09-27 14:31:13 +08:00
    改造不了虚拟滚动就去,找个 用 canvas 绘制的 tree
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3298 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 42ms · UTC 11:56 · PVG 19:56 · LAX 03:56 · JFK 06:56
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.