[Bug] 批量删除200条行,页面有明显白屏闪动
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 3.7k
- Forks
- 486
- Avg merge
- 1d 19h
- Merged PRs (30d)
- 16
Description
Version
lastest and( v1.19.3)
Link to Minimal Reproduction
Steps to Reproduce
- 调用删除接口 tableInstance.deleteRecords(rows), 删除200条数据(比如0-200)
- 观察页面,有明显白屏闪动, (codesandbox中更加明显)
Current Behavior
删除200行有明显白屏闪烁
Expected Behavior
没有闪烁,和新增200的效率record表现一样
Environment
- OS:win10
- Browser: chrome latest
- Framework:
Any additional comments?
查看源码后,发现增删行的入口是在 packages\vtable\src\scenegraph\layout\update-row.ts的 removeCells: CellAddress[]中实现的。
其中,删除调用下面代码。
removeRows.forEach(row => {
removeRow(row, scene, skipUpdateProxy);
});
删除最终调用function removeCellGroup(row: number, scene: Scenegraph): void,会立即从VRender的stage中删除对应的行,这时候引起了白屏,大概16ms左右。
接着在packages\vtable\src\scenegraph\layout\update-row.ts的 removeCells: CellAddress[]中继续处理add和update逻辑,这时候不更新VRender,最终的更新是在scene.proxy.progress()中进行渐进式渲染的,每次延时16ms, 代码块如下,这导致刚才删除后留下的白屏 ,需要16ms后才能被新行填补,出现白屏闪烁。
async progress() {
if (this.isProgressing) {
return;
}
this.isProgressing = true;
return new Promise<void>((resolve, reject) => {
setTimeout(async () => {
this.isProgressing = false;
if (this.isRelease) {
return;
}
// console.log('progress col', this.colUpdatePos, this.colEnd, this.currentCol, this.totalCol);
// console.log('progress row', this.rowUpdatePos, this.rowEnd, this.currentRow, this.totalRow);
// console.log('before: createRow', table.scenegraph.bodyGroup.lastChild.attribute);
// if (this.isSkipProgress) {
// await this.progress();
// } else
if (this.colUpdatePos <= this.colEnd) {
// console.log('progress colUpdatePos', this.colUpdatePos);
await this.updateColCellGroupsAsync();
await this.progress();
} else if (this.rowUpdatePos <= this.rowEnd) {
// console.log('progress rowUpdatePos', this.rowUpdatePos);
// 先更新
await this.updateRowCellGroupsAsync();
await this.progress();
} else if (this.currentCol < this.totalCol) {
await this.createCol();
await this.progress();
} else if (this.currentRow < this.totalRow) {
// console.log('progress currentRow', this.currentRow);
// 先更新没有需要更新的节点,在生成新节点
await this.createRow();
await this.progress();
}
handleTextStick(this.table);
this.table.scenegraph.updateNextFrame();
resolve();
}, 16);
});
}
我尝试修改延时等内容,但不成功。请问是否有官方的经验或者建议? 感谢
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the minimal reproduction and inspect packages/vtable/src/scenegraph/layout/update-row.ts, especially removeCells and the removeCellGroup path. Trace how scene.proxy.progress() schedules progressive updates after deleting 200 rows. Done means bulk deletion completes without the visible white-screen flicker while retaining the expected rendering behavior.
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
- 38/100