V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
zarte
V2EX  ›  问与答

vue 页面卡顿如何优化?

  •  
  •   zarte · 2020-08-31 21:58:34 +08:00 · 3387 次点击
    这是一个创建于 1544 天前的主题,其中的信息可能已经有所发展或是发生改变。

    v-for 方式生成 5 百多个 table (非组件),每个一百条数据以内字段不固定。之前发帖问了已正确设置唯一 key 。数据为动态 push 到数组渲染的。 页面任何操作输入文字,点击按钮啥的都卡。。。

    8 条回复    2020-09-01 10:34:30 +08:00
    seki
        1
    seki  
       2020-08-31 22:03:13 +08:00   ❤️ 1
    1.分页
    1.滚动加载
    1.虚拟渲染,例如 https://github.com/Akryum/vue-virtual-scroller
    seki
        2
    seki  
       2020-08-31 22:06:44 +08:00
    也可以检查一下你的代码,是不是你输入一下文字和点击一下按钮就会弄得整个页面都重新渲染了,适当地抽象化组件实现部分重渲染说不定也能解决问题
    meathill
        3
    meathill  
       2020-08-31 22:11:20 +08:00
    500 多个 table,每个 100 条数据,怎么都会卡……

    方案:

    1. 不要用 table,用 grid + 限制列宽
    2. 动态加载,保证同时只有少数几个表格在渲染
    sixway
        4
    sixway  
       2020-08-31 22:17:59 +08:00
    可以打开调试工具那里渲染花费了。
    chrome 的 Performance
    murmur
        5
    murmur  
       2020-08-31 22:21:16 +08:00
    页面发出来看看,这东西不给代码怎么回答你?
    jydeng
        6
    jydeng  
       2020-08-31 22:57:22 +08:00
    虚拟滚动
    zarte
        7
    zarte  
    OP
       2020-09-01 09:43:28 +08:00
    @meathill 嗯,我试下
    redbuck
        8
    redbuck  
       2020-09-01 10:34:30 +08:00
    $('*').length 看下有多少 dom
    dom 多可以懒加载.

    table 加个 v-if,容器加个最小高度,再监听滚动事件(节流),进入视口的解除 v-if,离开的恢复 v-if.最好封装成指令.
    数据量太大,又不用变化的,Object.freeze.
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2671 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 11:11 · PVG 19:11 · LAX 03:11 · JFK 06:11
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.