Antd ProTable 数据量并不大，显示的字段比较多，有11个，显示数据的速度慢，需要2s左右 #297

aoyinke · 2020-08-24T03:24:03Z

🧐 问题描述

Antd ProTable 数据量并不大，但是加载速度慢，需要2-3s
并不是接口的问题，接口测速只需要300ms
而且勾选的时候也出现了卡顿
我用Antd Table自己封装了一个功能一模一样的组件，几乎秒显。。。
请问大家有啥可以优化的方法吗

💻 示例代码

🚑 其他信息

chenshuai2144 · 2020-08-25T06:12:51Z

pro-table 里面有个去抖，导致至少需要 200ms 才显示

bingo618 · 2020-08-26T03:31:58Z

pro-table 里面有个去抖，导致至少需要 200ms 才显示

可以配置去掉200ms延迟吗？ProTable布局挺好看，感觉很卡顿。

chenshuai2144 · 2020-08-26T04:07:59Z

把你的配置和数据 show 一下，我 debug 一下，200ms 应该无感的

chenshuai2144 · 2020-08-26T04:16:47Z

dep of #278

aoyinke · 2020-08-26T07:16:05Z

麻烦了


"dependencies": {
    "@ant-design/icons": "^4.2.2",
    "@ant-design/pro-layout": "^6.4.8",
    "@ant-design/pro-table": "^2.5.13",
    "@types/lodash.isequal": "^4.5.5",
    "antd": "^4.5.4",
    "classnames": "^2.2.6",
    "js-base64": "^3.4.5",
    "less": "^3.12.2",
    "lodash": "^4.17.20",
    "lodash.isequal": "^4.5.0",
    "moment": "^2.25.3",
    "numeral": "^2.0.6",
    "omit.js": "^2.0.2",
    "path-to-regexp": "2.4.0",
    "qs": "^6.9.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-helmet-async": "^1.0.4",
    "react-router": "^4.3.1",
    "umi": "^3.2.16",
    "umi-request": "^1.0.8",
    "use-merge-value": "^1.0.1"
  },
  "devDependencies": {
    "@ant-design/pro-cli": "^1.0.18",
    "@types/classnames": "^2.2.7",
    "@types/express": "^4.17.0",
    "@types/history": "^4.7.7",
    "@types/jest": "^26.0.10",
    "@types/lodash": "^4.14.159",
    "@types/qs": "^6.9.4",
    "@types/react": "^16.9.46",
    "@types/react-dom": "^16.8.4",
    "@types/react-helmet": "^5.0.13",
    "@umijs/fabric": "^2.2.0",
    "@umijs/plugin-blocks": "^2.0.5",
    "@umijs/preset-ant-design-pro": "^1.2.0",
    "@umijs/preset-react": "^1.5.21",
    "@umijs/preset-ui": "^2.2.6",
    "carlo": "^0.9.46",
    "chalk": "^4.0.0",
    "cross-env": "^7.0.0",
    "cross-port-killer": "^1.1.1",
    "detect-installer": "^1.0.1",
    "enzyme": "^3.11.0",
    "eslint": "^7.7.0",
    "express": "^4.17.1",
    "gh-pages": "^3.0.0",
    "husky": "^4.0.7",
    "jsdom-global": "^3.0.2",
    "lint-staged": "^10.0.0",
    "mockjs": "^1.0.1-beta3",
    "prettier": "^2.0.1",
    "pro-download": "1.0.1",
    "puppeteer-core": "^5.0.0",
    "stylelint": "^13.0.0"
  }
// 数据，每页20条
createTime: "2020-08-21 15:47:06"
createUser: "shenx"
id: 119
imsi: "6666666666666"
insideId: "6666666666666"
macId: "6666666666666"
model: "FW6666666666666"
modelName: "fwe6666666666666"
modifyTime: "2020-08-26 14:29:33"
modifyUser: "admin"
name: "测试6666666666666"
outsideId: "6666666666666"
period: "0"
printMacId: "6666666666666"
status: "3"
typeId: 21
typeName: "水淹6666666666666"

<ProTable
        columns={columns(options, equipValueEnum)}
        pagination={{
          showQuickJumper: true,
        }}                                                                                                                
        actionRef={actionRef}
        request={async (params) => {
          const par = params;
          par.pageNum = params.current;
          try {
            const res = await getAgeingTest(params);
            if (res.code !== 200) {
              message.error(`页面请求数据失败，状态码：${res.code || '网关错误'}`);
            } else {
              return Promise.resolve({
                data: res.data.rows,
                success: true,
                total: res.data.total,
              });
            }
          } catch (error) {
            console.log(error);
          }
          return Promise.resolve({
            success: true,
          });
        }}
        rowKey="id"
        rowSelection={{
          onChange: (selectedRowKeys, selectedRows) => {
            handleSelectedEquip(() => selectedRows);
          },
        }}
        dateFormatter="string"
        toolBarRender={() => [
          <Button
            key="3"
            type="primary"
            onClick={() => {
              dispatch({
                type: 'GlobalModel/changeCreateModalVisible',
                payload: true,
              });
            }}
          >
            开始老化
          </Button>,
        ]}
      />

chenshuai2144 · 2020-09-01T12:09:51Z

延迟减少了，但是还是需要1s 左右，因为我们的数据实在 useEffect 才读取的，而table的数据是立马就准备好的，性能上还是有一些差距

aoyinke · 2020-09-02T01:02:14Z

好的，谢谢

zhangjingl02 · 2020-11-23T02:24:06Z

@aoyinke 怎么解决的啊？

zhangjingl02 · 2020-11-23T02:25:05Z

我也是遇到同样的问题，table 几乎没又延迟的加载，pro table 2-3秒

chenshuai2144 · 2020-12-01T10:48:35Z

更新下版本，是因为protable 发起请求比较慢

A9074o · 2021-01-15T03:15:29Z

@chenshuai2144 帅哥我发现一个问题就是我表格头部搜索是个下拉框接口返回的特别快但是下拉框里面值加载出来特别慢，需要5s

chenshuai2144 · 2021-01-15T05:05:55Z

是没有触发渲染把，可以把下拉框封成组件，就可以精确控制它的渲染了

A9074o · 2021-01-15T05:22:01Z

渲染很慢好像是等表格数据渲染完毕以后才去渲染的头部的下拉框

pollux2015 · 2021-01-22T08:21:01Z

我的表格字段有30多项，根本没法用，如果当前页面有input 都输入不了

jsonchou · 2021-02-03T15:34:43Z

31 * 10 的干净表格
render 函数执行了1400次，页面非常卡，开启debounceTime=300 也无用，代码如下：

 render: (txt, row, index, action) => }
    console.log('render', 1)
    return null
}

注释上述代码，采用默认 valueType，页面渲染性能卓越。

chenshuai2144 · 2021-02-04T09:36:44Z

render 这个很蛋疼的，因为render 的结果没法缓存，所以每次都要执行，如果需要性能好的话，一定要尽量不要写 render 之类的方法

nkHub · 2021-10-14T03:08:03Z

@chenshuai2144 我的显示23个字段，，有多个筛选，，开启了省略，加载要6、7秒。。无语了😐

Aaron-skech · 2021-12-16T09:00:17Z

18列 100条数据加载要8到9秒卡死了

zhangjiana · 2021-12-28T05:55:09Z

我的也出现了这个问题， columns是动态的，接口返回的很快。我把columns 给到之后，还是加载很慢

zhangjiana · 2021-12-28T06:02:59Z

关闭了省略，就好多了。

zhoubaibai · 2022-02-18T07:01:43Z

关闭了省略，就好多了。

关闭了省略是啥意思呀....

hpf0532 · 2022-10-21T07:14:41Z

关闭了省略，就好多了。

关闭了省略是啥意思呀....

ellipsis: false

NARUTOyuyang · 2023-05-28T13:14:29Z

延迟减少了，但是还是需要1s 左右，因为我们的数据实在 useEffect 才读取的，而table的数据是立马就准备好的，性能上还是有一些差距

这优化不了了吗？数据早就返回了，protable 还是在 loading 很久才渲染出来

NARUTOyuyang · 2023-05-28T14:03:00Z

好的，谢谢

所以你的渲染慢的问题是怎么解决呢？我 20 个字段，10 个需要 render ，卡的很

wx9999 · 2023-09-06T15:54:41Z

好的，谢谢

所以你的渲染慢的问题是怎么解决呢？我 20 个字段，10 个需要 render ，卡的很

请问你解决了嘛

xiaoxuehai · 2024-09-13T02:07:31Z

2024了遇到同样的问题这问题解决了吗？

XuChaow · 2024-11-20T07:14:51Z

pro-table 30列切换分页很卡很卡

XuChaow · 2024-11-20T07:15:36Z

好的，谢谢

那么你的渲染慢的问题怎么解决？我20个字段，10个需要渲染，卡的很

请问你找到我吗
请问你们解决了吗

webshy · 2025-01-13T07:51:04Z

我2025年遇到了，500条一页。接口时间500ms，页面需要5、6s才能渲染完成。怎么破，大佬们

xiaoxuehai · 2025-01-13T07:56:21Z

我2025年遇到了，500条一页。接口时间500ms，页面需要5、6s才能渲染完成。怎么破，大佬们

看下列是不是加了ellipsis: true，我去掉这个之后，加载速度会快一点，这个用的tooltip导致性能很差

webshy · 2025-01-13T08:03:37Z

我2025年遇到了，500条一页。接口时间500ms，页面需要5、6s才能渲染完成。怎么破，大佬们

看下列是不是加了ellipsis: true，我去掉这个之后，加载速度会快一点，这个用的tooltip导致性能很差

我没有加ellipsis: true 这个属性

xiaoxuehai · 2025-01-13T08:04:57Z

我2025年遇到了，500条一页。接口时间500ms，页面需要5、6s才能渲染完成。怎么破，大佬们

看下列是不是加了ellipsis: true，我去掉这个之后，加载速度会快一点，这个用的tooltip导致性能很差

我没有加ellipsis: true 这个属性

500行就卡了，你有多少列，贴代码吧

webshy · 2025-01-13T08:13:54Z

我2025年遇到了，500条一页。接口时间500ms，页面需要5、6s才能渲染完成。怎么破，大佬们

看下列是不是加了ellipsis: true，我去掉这个之后，加载速度会快一点，这个用的tooltip导致性能很差

我没有加ellipsis: true 这个属性

500行就卡了，你有多少列，贴代码吧
解决了，使用虚拟滚动

tylerrrkd · 2025-01-15T06:12:49Z

我2025年遇到了，500条一页。接口时间500ms，页面需要5、6s才能渲染完成。怎么破，大佬们

看下列是不是加了ellipsis: true，我去掉这个之后，加载速度会快一点，这个用的tooltip导致性能很差

我没有加ellipsis: true 这个属性

500行就卡了，你有多少列，贴代码吧
解决了，使用虚拟滚动

@webshy 大佬，虚拟滚动是内置还是自己手写的方案？

webshy · 2025-01-17T03:34:43Z

我2025年遇到了，500条一页。接口时间500ms，页面需要5、6s才能渲染完成。怎么破，大佬们

看下列是不是加了ellipsis: true，我去掉这个之后，加载速度会快一点，这个用的tooltip导致性能很差

我没有加ellipsis: true 这个属性

500行就卡了，你有多少列，贴代码吧
解决了，使用虚拟滚动

@webshy 大佬，虚拟滚动是内置还是自己手写的方案？

5.9以后版本增加了虚拟滚动设置。如果没可以手写

chenshuai2144 transferred this issue from ant-design/ant-design-pro Aug 25, 2020

chenshuai2144 added table ⭕️ bug Something isn't working labels Aug 25, 2020

chenshuai2144 mentioned this issue Aug 26, 2020

Protable加载慢问题🧐[问题] #278

Closed

chenshuai2144 closed this as completed Sep 1, 2020

This was referenced Oct 15, 2021

🧐[问题]ProTable render 里的action参数有什么作用吗？ #3842

Closed

🐛[BUG] 当我自定义render Protable Column 的时候，ellipsis和copyable属性失效 #3872

Closed

Antd ProTable 数据量并不大，显示的字段比较多，有11个，显示数据的速度慢，需要2s左右 #297

Antd ProTable 数据量并不大，显示的字段比较多，有11个，显示数据的速度慢，需要2s左右 #297

Comments

aoyinke commented Aug 24, 2020

🧐 问题描述

💻 示例代码

🚑 其他信息

chenshuai2144 commented Aug 25, 2020

bingo618 commented Aug 26, 2020

chenshuai2144 commented Aug 26, 2020

chenshuai2144 commented Aug 26, 2020 • edited Loading

aoyinke commented Aug 26, 2020 • edited by chenshuai2144 Loading

chenshuai2144 commented Sep 1, 2020

aoyinke commented Sep 2, 2020

zhangjingl02 commented Nov 23, 2020

zhangjingl02 commented Nov 23, 2020

chenshuai2144 commented Dec 1, 2020

A9074o commented Jan 15, 2021

chenshuai2144 commented Jan 15, 2021

A9074o commented Jan 15, 2021

pollux2015 commented Jan 22, 2021

jsonchou commented Feb 3, 2021 • edited Loading

chenshuai2144 commented Feb 4, 2021 • edited Loading

nkHub commented Oct 14, 2021

Aaron-skech commented Dec 16, 2021

zhangjiana commented Dec 28, 2021

zhangjiana commented Dec 28, 2021

zhoubaibai commented Feb 18, 2022

hpf0532 commented Oct 21, 2022

NARUTOyuyang commented May 28, 2023

NARUTOyuyang commented May 28, 2023

wx9999 commented Sep 6, 2023

xiaoxuehai commented Sep 13, 2024

XuChaow commented Nov 20, 2024

XuChaow commented Nov 20, 2024

webshy commented Jan 13, 2025

xiaoxuehai commented Jan 13, 2025

webshy commented Jan 13, 2025

xiaoxuehai commented Jan 13, 2025

webshy commented Jan 13, 2025 • edited Loading

tylerrrkd commented Jan 15, 2025

webshy commented Jan 17, 2025

chenshuai2144 commented Aug 26, 2020 •

edited

Loading

aoyinke commented Aug 26, 2020 •

edited by chenshuai2144

Loading

jsonchou commented Feb 3, 2021 •

edited

Loading

chenshuai2144 commented Feb 4, 2021 •

edited

Loading

webshy commented Jan 13, 2025 •

edited

Loading