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

aoyinke commented 3 years ago

🧐 问题描述

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

💻 示例代码

🚑 其他信息

chenshuai2144 commented 3 years ago

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

bingo618 commented 3 years ago

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

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

chenshuai2144 commented 3 years ago

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

chenshuai2144 commented 3 years ago

dep of https://github.com/ant-design/pro-components/issues/278

aoyinke commented 3 years ago

麻烦了


"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 commented 3 years ago

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

aoyinke commented 3 years ago

好的，谢谢

zhangjingl02 commented 3 years ago

@aoyinke 怎么解决的啊？

zhangjingl02 commented 3 years ago

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

chenshuai2144 commented 3 years ago

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

A9074o commented 3 years ago

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

chenshuai2144 commented 3 years ago

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

A9074o commented 3 years ago

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

pollux2015 commented 3 years ago

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

jsonchou commented 3 years ago

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

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

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

chenshuai2144 commented 3 years ago

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

nkHub commented 2 years ago

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

Aaron-skech commented 2 years ago

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

zhangjiana commented 2 years ago

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

zhangjiana commented 2 years ago

关闭了省略，就好多了。

zhoubaibai commented 2 years ago

关闭了省略，就好多了。

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

hpf0532 commented 1 year ago

关闭了省略，就好多了。

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

ellipsis: false

NARUTOyuyang commented 11 months ago

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

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

NARUTOyuyang commented 11 months ago

好的，谢谢

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

wx9999 commented 8 months ago

好的，谢谢

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

请问你解决了嘛

ant-design / pro-components