baidu / baidu/amis

大量字段场景下的表格/表单性能差

Open
#3,205 4 comments 1 reaction 0 assignees View on GitHub
need confirm
Dominant language
TypeScript
Stars
18.9k
Forks
2.7k
PR merge metrics
No merged PRs in 30d

Description

#### 描述问题:

大量字段场景下的表格/表单性能差. 在渲染完成后, 在一个 Input 中输入响应很慢.

#### 如何复现(请务必完整填写下面内容):

1. 你是如何使用 amis 的?
`npm`

2. amis 版本是什么?请先在最新 beta 版本测试问题是否存在
1.5.3

3. 粘贴有问题的完整 `amis schema` 代码:
20*20 的表格表单输入时非常卡顿.

```
const AmisTable = () => {
return renderAmis({
type: 'page',
body: {
type: 'form',
data: {
table: Array.from({ length: 20 }).map((_, i) => ({})),
},
body: [
{
showIndex: true,
type: 'input-table',
name: 'table',
label: 'Table',
addable: true,
needConfirm: false,
columns: Array.from({ length: 20 }).map((_, i) => ({
label: `A_${i}`,
name: `a_${i}`,
type: 'input-text',
})),
},
],
},
});
};

const Amis = () => {
return renderAmis({
type: 'page',
body: {
type: 'form',
api: 'https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm',
body: Array.from({ length: LENGTH }).map((_, i) => {
return {
type: 'input-text',
name: `name_${i}`,
label: `name_${i}`,
};
}),
},
});
};
```

![image](https://user-images.githubusercontent.com/1262198/145938136-aa579fe2-11b7-4d0b-aee6-59209d252b47.png)

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the supplied AmisTable and Amis reproductions using the reported 1.5.3 setup, then profile input handling and rendering while typing in the 20×20 cases. Done means a single input remains responsive in both the large-table and large-form scenarios, with coverage for the reproduction.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend, performance
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.